Odczytywanie wielu plików w pętli przy użyciu interfejsu API pliku HTML5

Question

Używam interfejsu API pliku HTML5 do odczytywania plików binarnych. Użytkownik może wybrać wiele plików, a następnie kliknąć przycisk, aby skopiować je do obiektu JavaScript. Mój kod jest tutaj wymienione:

<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> 

Jeśli użytkownik umieszcza w trzech plików, to tylko inwalidą własność „File_Content3” zostanie dodana do obiektu „dane” z wartością; pozostałe trzy ważne właściwości "File_Content0", "File_Content1" i "File_Content2" nie są tworzone.

Czy ktoś może rozwiązać problem? Dzięki.

Answer 1

Masz clouse problem ze zmienną i, to bym po prostu użyć innej zmiennej

 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]); 
    }