javascript - 上传时只显示图片名称

Question

我想从文件浏览器对话框上传图像。我希望在用户选择图像时预览图像。它在 jsfiddle 中工作，但在我的元素中不工作。

错误是

"Uncaught TypeError: Cannot read property 'addEventListener' of null"

不知道怎么解决。请帮帮我好吗？

function handleFileSelect(evt) {
  var files = evt.target.files; // FileList object

  // Loop through the FileList and render image files as thumbnails.
  for (var i = 0, f; f = files[i]; i++) {

    // Only process image files.
    if (!f.type.match('image.*')) {
      continue;
    }

    var reader = new FileReader();

    // Closure to capture the file information.
    reader.onload = (function(theFile) {
      return function(e) {
        // Render thumbnail.
        var span = document.createElement('span');
        span.innerHTML = ['<img class="thumb" src="', e.target.result,
          '" title="', escape(theFile.name), '"/>'
        ].join('');
        document.getElementById('previewImg').insertBefore(span, null);
      };
    })(f);

    // Read in the image file as a data URL.
    reader.readAsDataURL(f);
  }
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);

.thumb {
  border: 1px solid #000000;
  height: 75px;
  margin: 10px 5px 0 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='file' id="files" name="image" multiple="multiple" />
<div id='previewImg'></div>

Answer 1

我假设您的 document.getElementById ('files') 命令在页面完全呈现之前运行，因此选择器无法在页面上找到任何元素，并且您无法添加 addEventListener 到没有元素。

您必须将选择器放在文档加载函数中，如下所示:

document.addEventListener('DOMContentLoaded', function(){ 
    document.getElementById('files').addEventListener('change', handleFileSelect, false);
}, false);