用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選擇文件的問題

回答

相關問題