通过 FileAPI 上传文件答案

【问题标题】：File uploading via FileAPI通过 FileAPI 上传文件
【发布时间】：2011-12-26 09:28:57
【问题描述】：

我需要将多个文件读入一个函数 A。我需要为此使用 FileAPI。但 FileReader 执行异步下载。我可以在函数A的末尾得到所有文件的内容而不退出吗？

【问题讨论】：

【解决方案1】：

为了清楚起见，FileReader 没有下载任何内容。它异步将文件内容（在磁盘上显示）读取到内存中。

要做你想做的事，只需跟踪读取的文件并在它们全部完成后调用回调：

document.querySelector('[type="file"]').change = function(e) {
  handleFiles(toArray(e.target.files), function(results) {
    // results is an Array containing the FileReader results.
    alert('Done!');
  });

function toArray(list) {
  return Array.prototype.slice.call(list || [], 0);
}

function handleFiles(files, callback) {
  var results = [];

  files.forEach(function(file, i) {
    var reader = new FileReader();

    // Closure to capture the file information.
    reader.onload = function(e) {
      results.push(e.target.result);
      if (results.length == files.length) {
        callback(results);
      }
    };
    reader.readAsDataURL(file);
  });
}

试试看：http://jsbin.com/epatel/3/edit#html,live

【讨论】：