多次上传时的图像预览和名称
多次上传时的图像预览和名称
提问于 2014-04-07 22:41:41
在用ajax上传之前，我正在尝试显示一个预览和图片名称。我使用显示预览，同时使用".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])
}
})回答 2
Stack Overflow用户
回答已采纳
发布于 2014-04-07 22:48:02
创建一个新的作用域(闭包)以保持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);
}
});小提琴
Stack Overflow用户
发布于 2014-04-07 22:54:02
在Javascript中，for循环迭代器变量实际上不在for循环中。
在这个例子中，在循环运行完之后，变量"i“仍然是"5”：
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);
}因此，由于for循环变量的作用域，您正在运行到“争用条件”。您可以通过"e“参数访问文件名吗？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22924447
复制相关文章
相似问题
腾讯云开发者
