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

在用ajax上传之前，我试图显示预览和图片名称。我使用文件读取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]) 
    }

})

$（'input'）。更改（函数（）{
对于（var i=0；i创建一个新的作用域（closure）以保持
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);
    }
});

$（'input'）。更改（函数（）{
对于（var i=0，len=this.files.length；i'+self.files[j].name+''））
}
reader.readAsDataURL（self.files[j]）
})（i）本条；
}
});

在Javascript中，for循环迭代器变量实际上不在for循环的作用域内

在中，循环完成运行后，变量“i”仍将是“5”：

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

arrTest=[1,2,3,4,5]；
对于（var i=0；i他们认为这是一个“竞争条件”，在FileReader完成加载之前循环就完成了。您可以改为通过e参数访问文件名吗？我尝试用“e”参数显示名称，但结果是“未定义”我检查了文档，但这不起作用。请参阅此问答，以获取逐个加载多个文件的帮助：-如果您一次读取一个文件，则可以访问每个文件的数据，例如“名称”，在您的循环中。抱歉，阅读您给我的页面时，我无法理解在递归函数的哪一部分中使用了文件名。谢谢！@LukasKas-这与问题根本不符，在循环外声明变量与在for语句内声明变量完全相同，这不是竞争条件，而是范围问题。@adeneo-your-sol注意是好的。我会用不同于你的方式解决它，但我应该尝试使用闭包一次。完美，就是我想要的！谢谢：）嗨，我用过这个，但它在PC上工作很好，但在移动设备上不工作
var i;
for (i=0; i<arrTest.length; i++){
    console.log(i);
}