Lettura di più file in un loop utilizzando l'API del file HTML5

Question

Sto utilizzando l'API del file HTML5 per leggere i file binari. L'utente può selezionare più file e quindi fare clic su un pulsante per copiarli in un oggetto JavaScript. Il mio codice è elencato qui:

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

Se l'utente mette in tre file, allora solo una proprietà non valida 'File_Content3' verrà aggiunto all'oggetto 'di dati' con il valore; le altre tre proprietà valide 'File_Content0', 'File_Content1' e 'File_Content2' non vengono create.

Qualcuno può risolvere il problema? Grazie.

Answer 1

hai un problema di Clouse con la variabile i, mi piacerebbe sufficiente utilizzare un'altra variabile

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