如何在 FileReader.onload 中显示“i”（for 循环）的值答案

【问题标题】：How to show value of 'i' (for loop) inside FileReader.onload如何在 FileReader.onload 中显示“i”（for 循环）的值
【发布时间】：2017-07-29 11:04:58
【问题描述】：

我正在尝试通过input file 显示多个图像文件的预览，并为每个文件分配一个特定的 ID（i 从 for 循环生成）。一切正常，但分配 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。

【问题讨论】：

您应该在文件输入字段中使用 onChange。

标签： javascript html dom-events filereader

【解决方案1】：

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

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

【讨论】：