JavaScript 读取和预览多张图片

Question

代码如下：

HTML

<input id="browse" type="file" onchange="previewFiles()" multiple>

JavaScript

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);
  }

}

我有一个问题，因为我不完全理解发生了什么以及为什么它不像存储多个文件那样preview/seems。

Answer 1

你的最后几行代码：

if (files) {
   [].forEach.call(files, readAndPreview);
}

什么都不应该做。它适用于每个空数组。我认为您正在尝试做类似的事情：

files.forEach(readAndPreview)

这实际上会遍历文件数组中的所有文件并为它们调用 readAndPreview。

Answer 2

包含的代码中的主要问题是没有 ID 为 preview 的元素（参考：var preview = document.querySelector('#preview');）

添加这个就可以了。但是，您可以跳过 FileReader，因为它不需要。相反，将文件视为一个 Blob（它们本质上是相同的）并使用 createObjectURL() - 如果您想显示大量图像，性能和内存占用会明显更好。

document.querySelector('#browse').onchange = function() {
  var preview = document.querySelector('#preview');
  [].forEach.call(this.files, function(file) {
    if (/image\/.*/.test(file.type)) {   // use any image format the browser can read
      var img = new Image;
      img.onload = remURL;               // to remove Object-URL after use
      img.style.height = "100px";        // use style, "width" defaults to "auto"
      img.src = (URL || webkitURL).createObjectURL(file);
      preview.appendChild(img);          // add image to preview container
    }
  });
  
  function remURL() {(URL || webkitURL).revokeObjectURL(this.src)}
};

<input id="browse" type="file" multiple>
<div id=preview></div> <!-- an element with this ID was missing -->

JavaScript 读取和预览多张图片

JavaScript reading and previewing multiple images

html

javascript

image

filereader