Чтение нескольких файлов в цикле с помощью HTML5 File API

Я использую 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" не создаются.

может кто-нибудь решить проблему? Спасибо.

1 ответов


у вас есть проблема clouse с 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]);
     }