FileReader 删除多个文件时只读取一个文件答案

【问题标题】：FileReader reads only one file when multiple droppedFileReader 删除多个文件时只读取一个文件
【发布时间】：2020-01-25 10:35:05
【问题描述】：

我正在编写代码和格式，并努力阅读每个文件。我得到的是只读取一个文件。

下面的代码会记录每次迭代 (console.log(i))，但只会读取并记录最后一个文件，无论是读取为 dataURL 还是 Text

fileInput.on('change',function(){

    var files= fileInput.prop('files');
    console.log(files);

    for(var i = 0; i < files.length; i++){

       var reader = new FileReader();
      console.log(i);
      reader.onload = function(){

          console.log(reader.result);
      }
      reader.readAsDataURL(files[i]);

    }

  });

我需要在控制台中登录多个文件中的每一个。提前感谢

【问题讨论】：

把var reader = new FileReader();改成let reader = new FileReader();

标签： javascript file reader

【解决方案1】：

使用let 而不是var 将变量正确地作用于循环：

for (let i = 0; i < files.length; i++) { // Use let here

  var reader = new FileReader();
  console.log(i);
  reader.onload = function() {

    console.log(reader.result);
  }
  reader.readAsDataURL(files[i]);

}

【讨论】：

嗨，幸运的是，结果相同。想着不忙于其他文件异常。谢谢

【解决方案2】：

对于reader 变量，您应该使用let 而不是var，因为var 是函数作用域。

【讨论】：

【解决方案3】：

您没有忘记input 元素上的multiple 属性吗？

【讨论】：

嗨，不，我没有......我收到异常：未捕获的 DOMException：无法在“FileReader”上执行“readAsDataURL”：对象已经忙于读取 Blob。（...）