Question

我找到了用于读取多个图像的代码 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);
  }

}

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

Answer 1

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

Answer 2

您的最后一行代码：

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

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

files.forEach(readAndPreview)

实际上会覆盖文件数组中的所有文件，并为它们调用readAndPreview。

JavaScript读取和预览多个图像

2 个答案: