我正在尝试在我的项目中实现JavaScript的FileReader接口。
要求:有一个文件输入字段,启用“multiple”选项,我希望用户选择几张图片,并在提交之前就能在页面上看到这些图片(以便他/她可以删除它们!)。但问题是屏幕上只显示一张图片。虽然已创建了标签,但除了最后一张图片外,其src为空。
代码如下:
例如,在图像选择弹出窗口中,如果我已经选择了img1、img2和img3,则只显示img3。但是,在提交后,服务器端确实会收到所有的图像:
。我在这里漏掉了什么?
要求:有一个文件输入字段,启用“multiple”选项,我希望用户选择几张图片,并在提交之前就能在页面上看到这些图片(以便他/她可以删除它们!)。但问题是屏幕上只显示一张图片。虽然已创建了标签,但除了最后一张图片外,其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。但是,在提交后,服务器端确实会收到所有的图像:
![enter image description here](https://istack.dev59.com/P4Zkx.webp)