使用 HTML5 File API 循环读取多个文件答案

【问题标题】：Reading multiple files in a loop using HTML5 File API使用 HTML5 File API 循环读取多个文件
【发布时间】：2013-07-26 04:57:03
【问题描述】：

我正在使用 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' 将被添加到具有值的 'data' 对象中；未创建其他三个有效属性“File_Content0”、“File_Content1”和“File_Content2”。

谁能解决这个问题？谢谢。

【问题讨论】：

标签： javascript html fileapi

【解决方案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]);
     }

【讨论】：