javascript - 如何在 FileReader.onload 中显示 'i' (for 循环)的值

Question

我试图通过输入文件显示多个图像文件的预览，并为每个文件分配一个特定的ID(从for循环生成的i)。一切工作正常，但分配它们的 id 时出现问题。

我的代码是:

function fileSelected() {
var files = event.target.files;
    for(var i=0; i<files.length; i++) {
    

   var reader = new FileReader();
reader.onload = function(event) { 
  var picWrap = '<img id="'+i+'" src="'+event.target.result'" />';
}
reader.readAsDataURL(files[i]);
} }

我使用onclick来使用此功能

现在根据上面的代码我可以预览所有文件，但是它们的ID有问题。

就像如果我选择 2 个文件那么结果是

(filePreview) Id = 2
 (filePreview2) Id = 2

如果我选择 3 个文件，那么我将获得所有 3 个文件的预览，但每张图片的 ID 变为 3，如果我选择单个文件，那么我的值将变为 1 而不是 0。

Answer 1

问题是，当 onload 事件发生时，循环已经完成，循环索引是最后一个值。一种选择是执行以下操作，将回调中的 i 设置为调用绑定(bind)时提供的值:

reader.onload = (function(i, event) { 
  var picWrap = '<img id="'+i+'" src="'+event.target.result'" />';
}).bind(reader, i);