Javascript FileReader多个图像
She*_*shi 4 html javascript jquery image filereader
我正在尝试在我的项目中实现javascript的FileReader接口。
要求：有一个启用了“多个”的文件输入字段，我希望用户应该选择一些图像，甚至在单击提交之前，也应该在页面上看到这些图像，这样，如果（s ）他要！）。但是问题在于屏幕上仅显示一张图像。标签已创建，但src为空，除了最后一个图像。
代码：
<html>
<head>
<meta charset="windows-1252">
<title></title>
</head>
<body>
<div>
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="abc[]" multiple/>
<input type="submit"/>
</form>
</div>
<img id="image0"/>
</body>
<script src="resources/js/jquery-2.1.3.min.js" type="text/javascript"></script>
<script>
$('document').ready(function () {
$("input[name='abc[]']").change(function (e) {
console.log(e.originalEvent.srcElement.files.length);
for (var i = 1; i <= e.originalEvent.srcElement.files.length; i++) {
var file = e.originalEvent.srcElement.files[i-1];
var img = document.createElement("img");
img.id = "image"+i;
var reader = new FileReader();
reader.onloadend = function () {
img.src = reader.result;
}
reader.readAsDataURL(file);
$("#image"+(i-1)).after(img);
}
});
});
</script>
例如，如果我选择了img1，则在图像选择弹出窗口中。img2和img3，仅显示img3。但是，在点击提交时，我确实在服务器端获得了所有图像：
我在这里想念什么？
for onloadend回调将在for循环完成后触发，因此img将为您onloadend为每个FileReader创建的对象触发时创建的最后一个图像元素。解决此关闭问题的一种简单方法是使用IIFE返回一个函数，该函数使用循环中该时刻的img变量的值作为处理程序。
reader.onloadend = (function (img) {
return function(){
img.src = reader.result;
};
})(img)
或使用每个 JQuery
$.each(e.originalEvent.srcElement.files, function(i, file) {
var img = document.createElement("img");
img.id = "image"+(i+1);
var reader = new FileReader();
reader.onloadend = function () {
img.src = reader.result;
}
reader.readAsDataURL(file);
$("#image"+i).after(img);
});