HTML5ファイルAPIを使用してループ内で複数のファイルを読む

Question

私はHTML5ファイルAPIを使用してバイナリファイルを読み込みます。ユーザーは複数のファイルを選択し、ボタンをクリックしてJavaScriptオブジェクトにコピーすることができます。私のコードは以下のとおりです：ユーザーは三つのファイルに入れ

<script>   
    var data = new Object; 
    function ReadFiles() 
    { 
     var files = document.getElementById('file').files; 
     for (var i = 0; i < files.length; i++) { 
      var reader = new FileReader(); 
      reader.onloadend = function (evt) { 
       if (evt.target.readyState == FileReader.DONE) { 
        data["File_Content" + i] = btoa(evt.target.result); 
       } 
      }; 
      reader.readAsBinaryString(files[i]); 
     } 
    } 
    </script> 
    <input type="file" id="file" name="file[]" multiple /> 
    <button onclick="ReadFiles();">Read Files</button> 

場合は、唯一の無効なプロパティ「File_Content3は」の値を持つ「データ」オブジェクトに追加されます。他の3つの有効なプロパティ 'File_Content0'、 'File_Content1'、および 'File_Content2'は作成されません。

誰でも問題を解決できますか？ありがとう。

Answer 1

あなたはi変数とクラウズ問題を持って、私は単純に別の変数

 var j = 0, k = files.length; 
    for (var i = 0; i < k; i++) { 
     var reader = new FileReader(); 
     reader.onloadend = function (evt) { 
      if (evt.target.readyState == FileReader.DONE) { 
       data["File_Content" + j] = btoa(evt.target.result); 
       j++; 
       if (j == k){ 
        alert('All files read'); 
       } 
      } 
     }; 
     reader.readAsBinaryString(files[i]); 
    } 

を使用したいです