用HTML5中的FileReader选择文件的问题

我试图制作一个视频预览脚本。我想要一个拖放功能和一个由input type =“file”元素选择的文件。下面是函数：用HTML5中的FileReader选择文件的问题

   function FileHandler(files){ 
        for(var i = 0; i < 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); 
        } 
       }

然后是

<input type="file" id="OpenFileDialog" multiple onchange="FileHandler(this.files)">

而且DND处理程序：

  function d(e){ 
       e.stopPropagation(); 
       e.preventDefault(); 
       files = e.dataTransfer.files; 
       FileHandler(files); 
      } 
      document.getElementById('droparea').addEventListener('drop',d,false);

我实在看不出什么错的reader.onload永远不会被调用！这将是伟大的一些帮助！

来源

2011-08-11 eruducer

当我遇到类似的问题时到了这里。

尝试执行错误，你会发现谷歌浏览器抛出“安全错误”。尽管如此，Firefox（7.0.1）也是如此。

由于谷歌浏览器对开发者施加的本地文件安全限制。这个本地文件安全限制确实会对快速开发测试造成影响！

将HTML放到网络服务器上，问题就解决了。没有网络服务器？尝试Firefox！ - 允许从文件访问文件选项从来没有真正为我工作！

最好， Sridhar

来源

2011-10-30 07:13:57 Sridhar

用HTML5中的FileReader选择文件的问题

回答

相关问题