有关FileReader.readAsDataURL(),为什么不能连续选择同一个文件?

自行脑补
  • 1k
<!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>

clipboard.png

这是在MDN上面FileReader.readAsDataURL()的例子,我想做一个图片上传然后可以页面预览,但是发现用这个方法无法实现连续选择同一张图片,因为我做的页面自己加上了删除功能,这样删除后想要重新选择这张图片也是不可以的,问题到底出在哪里,求解惑?

回复
阅读 3.7k
3 个回答

问题应该是出在onchange上, 两次选择同一个文件onchange应该没有进行响应

丁卯小生
  • 2
新手上路,请多包涵
if (files) {
    [].forEach.call(files, readAndPreview);
    document.getElementById('browse').value = '';
}

图片预览完,清空input,可保证onchange事件一直能响应。

input onchange事件有多种解决方法,比如,给input一个其他的属性,不断变化,重新更新tpye为file,额,挺多方法的。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏