Question

我必须使用File API和验证来制作图像预览组件。这是JS

JS

function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

 reader.onloadend = function () {
   if (preview.width.toFixed(0) > 400 || preview.height.toFixed(0) > 400) { 
     alert('enter a 400x400px or less image');
   } else {
      preview.src = reader.result;
   }
 }
 if (file) {
   reader.readAsDataURL(file);
 } else {
   preview.src = "";
 }  
}

HTML

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image">

显示图像，但现在我必须进行一些验证，因此当用户尝试将同一图像上传两次时，该文件只能读取一次（我认为它是因为onChange事件检测到文件是相同的，因此没有变化。

如果能够在用户上传图像的同时阅读图像，我该怎么办？

的jsfiddle https://jsfiddle.net/j5gyv7pm/10/

javascript - onchange事件的图像预览

0 个答案: