2011-08-11 19 views
1

ビデオプレビュースクリプトを作成しようとしています。ドラッグ&ドロップと入力タイプ= "ファイル"要素で選択されたファイルの両方に1つの機能が必要です。ここでは関数は次のとおりです。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が呼び出されることはありませんいただきました!間違って見ることができません!それはいくつかの助けを借りて素晴らしいだろう!

答えて

2

私も同様の問題に直面しました。

onerrorを実装しようとすると、Google Chromeで「セキュリティエラー」が発生することがあります。 Firefox(7.0.1)でも同じことができます。

Google Chromeは、ローカルファイルのセキュリティ制限により、開発者に課せられています。このローカルファイルのセキュリティ制限は、迅速なdev-testingsに大きな負担をかけることになります。

HTMLをWebサーバーに配置すると、問題は解決されます。 Webサーバーはありませんか? Firefoxをお試しください! --allow-file-access-from-filesオプションは本当に私のために働いたことはありません!

ベスト、 スリッパ

関連する問題