等到所有文件被异步读取（FileReader）然后运行代码

Question

我有一个页面，用户可以在其中 select 一个文件夹来上传文件。在发送文件之前，我需要阅读它们并检查数据。我的代码组织如下：

$( '#folder-select' ).on('change', getValidFileList);
var fileList = [];

var getValidFileList = function(event) {

    //Get the selected files
    files  = $( this ).get(0).files;

    for(var i=0; i<files.length; i++) {
        checkFile(files[i]);
    }
    //Do something with the final fileList
    console.log(fileList);
};

var checkFile = function(file) {
    var reader = new FileReader();
    reader.onload = function (event) {
        //Here I parse and check the data and if valid append it to fileList
    };
    reader.readAsArrayBuffer(file);

};

我想使用生成的 fileList 数组来保存 processing/displaying 上传的文件。我发现 reader.onload() 是异步调用的，所以 for 循环后 console.log(fileList) 的结果是一个空数组（它在 reader.onload() 被触发之前执行） .有没有办法等到所有文件都被读取并附加到文件列表？

Answer 1

只需跟踪已处理的文件数与给定的文件数相比：

function getValidFileList(files, callback) {

  var count = files.length;              // total number of files
  var fileList = [];                     // accepted files

  //Get the selected files
  for(var i = 0; i < count; i++) {       // invoke readers
    checkFile(files[i]);
  }

  function checkFile(file) {
    var reader = new FileReader();
    reader.onload = function(event) {
      var arrayBuffer = this.result;
      //Here I parse and check the data and if valid append it to fileList
      fileList.push(arrayBuffer);        // or the original `file` blob..
      if (!--count) callback(fileList);  // when done, invoke callback
    };
    reader.readAsArrayBuffer(file);
  }
};

--count 将在每 reader 加载命中减去一个。当 =0（或 !count）时，它调用回调。请注意，数组顺序可能与文件 [n] 中的顺序不同，这很重要。

然后像这样调用它：

$( '#folder-select' ).on('change', function() {
  getValidFileList(this.files, onDone)
});

function onDone(fileList) {
  // continue from here
}

等到所有文件被异步读取（FileReader）然后运行代码

Wait until all files are read asynchronously (FileReader) and then run code

javascript

asynchronous

filereader