使用FileReader和readAsArrayBuffer读取多个文件

Question

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

buildspec.yml

这是js文件：

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

所以现在我每次迭代都有新的FileReader，我摆脱了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); }); } 错误，现在我的数组中有相同的文件，虽然我选择了不同的。

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);
    });
}

然而，这并不保证任何特定的＆＃34;顺序＆＃34;的$('#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被称为

的顺序

Answer 2

+ file.name处存在语法错误，)处缺少.ready()，已定义参数并将reader传递给IIFE

＆＃13;

＆＃13;

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);
  });
})

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;