JavaScript搞砸了OnChange文件输入

Question

我不明白为什么网络技术如此混乱.我正在努力完成一些非常简单的事情.但发现它有bug.

所以我要做的是在div中加载用户选择的图像.它第一次工作.但是,一旦我选择浏览并选择另一个图像,它就不起作用.这有什么不对？

<input type="file" id="imgUploadButton" class="default" name="picture" onchange="imageUploaded(event);" />

这是Javascript代码

var selectedFile = event.target.files[0];
var reader = new FileReader();
var imgtag = document.getElementById("imageTool");

imgtag.title = selectedFile.name;
reader.onload = function(event) {
    imgtag.src = event.target.result;
 };
 reader.readAsDataURL(selectedFile);

Answer 1

如果我是你,我会以不同的方式定义onchange事件,例如通过执行以下操作:

<input type="file" id="imgUploadButton" />
<div><img id="imageTool" /></div>
<script>
  // Create a self-executing anonymous function so that the window
  // isn't being cluttered with global variables
  (function() {
    // First get the file element
    var fileElement = document.getElementById('imgUploadButton');

    // Now if we found the file element, add the onchange event, 
    // doing it like this maximizes compatibility
    if (fileElement) fileElement.onchange = imageUploaded;

    // Define your imageUploaded function, as it will get hoisted
    // anyway
    function imageUploaded(event) {
      var selectedFile = event.target.files[0];
      var reader = new FileReader();
      var imgtag = document.getElementById("imageTool");
      imgtag.title = selectedFile.name;
      reader.onload = function(event) {
        imgtag.src = event.target.result;
      };
      reader.readAsDataURL(selectedFile);
    }
  }());
</script>

当然,最好是在body标签的末尾执行此操作.在这里看我的jsfiddle.