等待所有文件异步读取(FileReader)，然后运行代码 [英] Wait until all files are read asynchronously (FileReader) and then run code

问题描述

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

I have a page where the user can select a folder to upload files. Before sending the files, I need to read them and check the data. My code is organized as follows:

$( '#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数组来继续处理/显示上载的文件.我发现reader.onload()是异步调用的，因此for循环之后的console.log(fileList)结果是一个空数组(在激发reader.onload()之前执行).有什么方法可以等到所有文件都读取并附加到fileList之后?

I would like to take the resulting fileList array to keep processing/displaying the uploaded files. I found that reader.onload() is called asynchronously, so the result of the console.log(fileList) after the for loop is an empty array (it is executed before the reader.onload() is fired). Is there any way to wait until all files are read and appended to fileList?

推荐答案

只需跟踪已处理的文件数与已分配的文件数相比即可.

Just keep track of how many files has been processed compared to how many files has been given:

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将为每个读取器加载命中次数减去1.当= 0(或！count)时，它将调用回调.注意，数组顺序可能与来自文件[n]的顺序不同，这应该很重要.

The --count will subtract one per reader onload hit. When =0 (or !count) it invokes the callback. Notice that the array order may not be the same as the one from files[n] it this should matter.

然后像这样调用它:

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

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

这篇关于等待所有文件异步读取(FileReader)，然后运行代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！