使用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笨拙

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任何特定“顺序”-因为异步代码是asynchronouos

使用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的顺序

Answer 2

有在语法错误+ file.name和缺失)在.ready()定义的参数，并通过reader来IIFE

 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, reader) { return function() { fileList.push(reader.result); $('#upload-list').append('<div class="upload-list-item">' + file.name + '</div>'); } })(file, reader); reader.readAsArrayBuffer(file); console.log(fileList); } } $('#file-input').on('change', function(e) { addFiles(e.target.files); }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form enctype="multipart/form-data"> <input id="file-input" type="file" multiple="" accept="image/*"> </form> <div id="upload-list"></div>