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中，变量＆＃34; i＆＃34;仍将是＆＃34; 5＆＃34;循环运行完毕后：

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

由于这个怪癖，在Javascript中编写这样的循环是最好的做法：

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

所以，你正在进入竞争状态＆＃34;由于for循环变量的范围。你可以通过＆＃34; e＆＃34;来访问文件名。参数，而不是？

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

2 个答案: