JavaScript 读取和预览多张图片答案

【问题标题】：JavaScript reading and previewing multiple imagesJavaScript 读取和预览多张图片
【发布时间】：2017-01-20 11:14:45
【问题描述】：

我在 internet.

代码如下：

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

}

我有一个问题，因为我不完全理解发生了什么以及为什么它不预览/似乎它正在存储多个文件。

【问题讨论】：

标签： javascript html image filereader

【解决方案1】：

包含代码中的主要问题是没有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 -->

【讨论】：

【解决方案2】：

你的最后几行代码：

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

应该什么都不做。它适用于每个空数组。我认为您正在尝试执行以下操作：

files.forEach(readAndPreview)

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

【讨论】：

这不起作用，因为文件包含一个 FileList 对象，而不是一个数组，并且没有 forEach() 方法。
function.call 使用指定的 this 参数调用函数。在这种情况下，Array.prototype.forEach 在files 上运行