我正在尝试读取并将多个文件添加到数组中。我已经发现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”错误,现在我的数组中有相同的文件,尽管我选择了不同的文件。
fileList.push(reader.result);
... the problem is whatreader
will be (you fixedfile
using an IIFE, but notreader
- Jaromanda X