多次上传时的图像预览和名称

Question

我正在尝试在使用 ajax 上传之前显示图像的预览和名称。我使用 File Read API 显示预览，同时使用“.name”方法显示文件名，问题是它显示所有预览但所有图像都具有相同的名称，最后一个文件名。谢谢！

$('input').change(function(){
    for (var i=0; i<this.files.length; i++){
        var reader = new FileReader()
        reader.onload = function (e) {
            $('ul').append('<li><img src="'+e.target.result+'">'+this.files[i].name+'</li>')
        }
        reader.readAsDataURL(this.files[i]) 
    }

})

Answer 1

创建一个新的作用域（闭包）以保持i 的值，因为当异步onload 处理程序触发时，循环已经结束，i 的值将是最后一组，将它传递给 IIFE 解决了这个问题

$('input').change(function () {
    for (var i=0, len = this.files.length; i < len; i++) {
        (function (j, self) {
            var reader = new FileReader()
            reader.onload = function (e) {
                $('ul').append('<li><img src="' + e.target.result + '">' + self.files[j].name + '</li>')
            }
            reader.readAsDataURL(self.files[j])
        })(i, this);
    }
});

FIDDLE

Answer 2

在 Javascript 中，for 循环迭代器变量并不真正在 for 循环的范围内。

在this example 中，变量“i”在循环运行结束后仍将是“5”：

arrTest = [1,2,3,4,5];
for (var i=0; i<arrTest.length; i++){
    console.log(i);
}
alert(i);

由于这个怪癖，在 Javascript 中编写这样的 for 循环是一种最佳实践：

var i;
for (i=0; i<arrTest.length; i++){
    console.log(i);
}

因此，由于 for 循环变量的作用域，您正在运行“竞争条件”。你可以通过那个“e”参数来访问文件名吗？