有关FileReader.readAsDataURL()，为什么不能连续选择同一个文件？
<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Image preview example</title>
</head>
<body onload="loadImageFile();">
<input id="browse" type="file" onchange="previewFiles()" multiple>
<div id="preview"></div>
</body>
<script>
function previewFiles() {
var preview = document.querySelector('#preview');
var files = document.querySelector('input[type=file]').files;
function readAndPreview(file) {
// Make sure `file.name` matches our extensions criteria
if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
var reader = new FileReader();
reader.addEventListener("load", function () {
var image = new Image();
image.height = 100;
image.title = file.name;
image.src = this.result;
preview.appendChild( image );
}, false);
reader.readAsDataURL(file);
}
}
if (files) {
[].forEach.call(files, readAndPreview);
}
}
</script>
</html>
这是在MDN上面FileReader.readAsDataURL()的例子，我想做一个图片上传然后可以页面预览，但是发现用这个方法无法实现连续选择同一张图片，因为我做的页面自己加上了删除功能，这样删除后想要重新选择这张图片也是不可以的，问题到底出在哪里，求解惑？
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
问题应该是出在onchange上, 两次选择同一个文件onchange应该没有进行响应
图片预览完，清空input，可保证onchange事件一直能响应。
input onchange事件有多种解决方法，比如，给input一个其他的属性，不断变化，重新更新tpye为file，额，挺多方法的。