使用HTML5在循環中讀取多個文件文件API

Question

我正在使用HTML5 File 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」將被添加到與價值的「數據」對象;其他三個有效屬性「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]); 
    }