我所要做的就是让用户上传图像文件并逐一显示，但由于某种原因，我上传的图像列表中的第一个文件始终无法工作。图像数据未定义。没有显示错误。
此处测试：http://jsfiddle.net/59q8f3bh/
尝试只上载一个图像，然后再上载多个图像。
我的HTML:
<body>
<input type="file" name="image" id="image" multiple accept="image/*">
<button type="submit" onclick="upload()">Upload</button>
<img src="">
<script src="js/upload.js"></script>
</body>
我的JS:
function upload() {
var selected = document.getElementById('image');
for (var i = 0; i < selected.files.length; i++) {
var img = selected.files[i];
var imgData;
var reader = new FileReader();
reader.addEventListener("load", function () {
imgData = reader.result;
}, false);
reader.readAsDataURL(img);
document.getElementsByTagName('img')[0].src = imgData;
alert(i);
}
}
这是解决方案的关键。
您用"load"等待的事件是异步的，需要一些时间，因此，当你的程序向下流动并点击这一行时：
document.getElementsByTagName('img')[0].src = imgData;
由于"加载"事件的异步性质，尚未设置imgData，因此结果未定义。
解决方案是将img setter移到事件回调中。
load事件异步发生，需要在回调函数中使用结果。
reader.addEventListener("load", function () {
imgData = reader.result;
document.getElementsByTagName('img')[0].src = imgData;
}, false);
reader.readAsDataURL(img);
alert(i);
}
但是你只能看到最后一张图片，因为只有一个<img>元素。