使用FileReader和readAsArrayBuffer读取多个文件

Question

我正在尝试读取多个文件并将其添加到数组中.我已经发现readAsArrayBuffer是一个异步函数,所以我需要等待以前的上传结束.我试图使用回调,但我失败了.

<form enctype="multipart/form-data">
  <input id="file-input" type="file" multiple="" accept="image/*">
</form>
<div id="upload-list"></div>

这是js文件:

var fileList = [];
$(document).ready(function() {
  function addFiles(files) {
    for (var i = 0; i < files.length; i++) {
      var file = files[i];
      var reader = new FileReader();
      reader.onloadend = (function(file) {
        return function() {
          fileList.push(reader.result);
          $('#upload-list').append('<div class="upload-list-item">' + file.name '</div>');
        }
      })(file);
      reader.readAsArrayBuffer(file);
      console.log(fileList);
    }
  }
  $('#file-input').on('change', function(e) {
    addFiles(e.target.files);
  });
}

所以现在我每次迭代都有新的FileReader,我摆脱了Failed to execute 'readAsArrayBuffer' on 'FileReader': The object is already busy reading Blobs错误,现在我的数组中有相同的文件,虽然我选择了不同的.

Answer 1

你的问题reader将被破坏 - 使用.forEach意味着每次迭代在其自己的闭包中是安全的 - 不需要IIFE kludges

function addFiles(files) {
    // files is not a regular Array
    [].forEach.call(files, function(file) {
        var reader = new FileReader();
        reader.onloadend = function() {
            fileList.push(reader.result);
            $('#upload-list').append('<div class="upload-list-item">' + file.name + '</div>');
        }
        reader.readAsArrayBuffer(file);
    });
}

但是,这并不保证 - 的任何特定"顺序" $('#upload-list').append- 因为异步代码是异步的

使用Promises(可以为旧浏览器填充)你可以做类似的事情

function addFiles(files) {
    return Promise.all([].map.call(files, function (file) {
        return new Promise(function (resolve, reject) {
            var reader = new FileReader();
            reader.onloadend = function () {
                resolve({ result: reader.result, file: file });
            };
            reader.readAsArrayBuffer(file);
        });
    })).then(function (results) {
        results.forEach(function (result) {
            $('#upload-list').append('<div class="upload-list-item">' + result.file.name + '</div>');
        });
        return results;
    });
}

这将保证$('#upload-list').append被调用的订单