Filereader.Onload过早启动

Question

我尝试读取由输入类型文件上传的文件(多个(。代码如下：

$(document).ready(function() {
$('#convert').on('click', function() {
var files=$('#files')[0].files;
if (!files) return;
for (var i=0; i<files.length; i++) {
var file=files[i];
fr = new FileReader();
fr.onload = (function(received) {      
var note=$(fr.result);
});
fr.readAsText(file);
}
});
});

现在我的问题是："onload"-函数甚至在加载文件之前就被调用了。note从不包含任何内容。但是，当我在note-行之前放置一个断点并等待一段时间时，note就会获得内容。

看起来，onload((-事件调用得太早了。我该怎么办？

(浏览器为Chrome(

Answer 1

我用this.result:替换了fr.result

fr.onload = (function() {      
var note=$(this.result);
});

做到了

Answer 2

您正在将fr设置为全局变量，并且在加载启动时，由于循环，它将是一个与您预期不同的对象

尝试将其封装在IIFE中以创建闭包，并使fr成为局部变量

for (var i = 0; i < files.length; i++) {  
(function(file) {
var fr = new FileReader();
fr.onload = function(received) {
var note = $(fr.result);// not sure what intent is here
};
fr.readAsText(file);
})(files[i])
}