title: Problems with selecting files with FileReader in HTML5
body: <p>Im trying to make a video preview script. I want one function for both drag and drop and files selected by an input type="file" element. Here is the function:</p>
  
  <pre><code>                function FileHandler(files){
                      for(var i = 0; i &lt; files.length; i++){
  
                          file = files[i];
  
                          var reader = new FileReader();
                          reader.onload = function(evt){
                              var VideoSpan = document.createElement('span');
                              var Video = document.createElement('video');
                              VideoSpan.classList.add('VideoPreviewSpaner');
                              Video.classList.add('VideoPreview');
                              Video.controls="controls";
                              Video.src = evt.target.result
                              VideoSpan.appendChild(Video);
                              document.getElementById('VideoWindow').appendChild(VideoSpan);
                              document.getElementById('VideoWindow').style.display = "block";
                          }
                          reader.readAsDataURL(file);
                      }
                  }
  </code></pre>
  
  <p>And then the</p>
  
  <pre><code>&lt;input type="file" id="OpenFileDialog" multiple onchange="FileHandler(this.files)"&gt;
  </code></pre>
  
  <p>And the dnd handler:</p>
  
  <pre><code>            function d(e){
                  e.stopPropagation();
                  e.preventDefault();
                  files = e.dataTransfer.files;
                  FileHandler(files);
              }
              document.getElementById('droparea').addEventListener('drop',d,false);
  </code></pre>
  
  <p>I really can't see whats wrong the reader.onload is never called! It would be great with some help!</p>