如何使用 FileReader.readAsDataURL() 将图像的多个实例插入 html？

Question

我想将用户使用 FileReader.readAsDataURL() 从本地计算机选择的图像插入单个 html 页面上的多个 <img> 元素。

使用 MDN docs for FileReader.readAsDataURL() 提供的示例代码，图像仅被插入到第一个 img 元素中，而不是其余的 .

我认为图像只插入第一个 <img> 实例的原因是因为示例代码使用 document.querySelector('img')。但是，当我使用document.querySelectorAll('img')时，它仍然不起作用。

MDN 文档提供了 a working codepen example，您可以在实际操作中查看。这是他们的静态代码：

<!--html-->
<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">

和

//js
function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.addEventListener("load", function () {
    preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}

这里是a working codepen of my code，下面是我的静态代码

<div>
  <label>Select an Image</label>
  <input type="file" onchange="previewFile()">
</div>

<div>
  <img id="small" src="http://placehold.it/900x900"/>
  <img id="med" src="http://placehold.it/1200x1200"/>
  <img id="large" src="http://placehold.it/1500x1500"/>
</div>

<script>
  function previewFile() {
    var preview = document.querySelector('img');
    var file    = document.querySelector('input[type=file]').files[0];
    var reader  = new FileReader();

    reader.addEventListener("load", function () {
      preview.src = reader.result;
    }, false);

    if (file) {
      reader.readAsDataURL(file);
    }
  }
</script>

任何人都可以提供一些帮助来让用户选择的图像填充页面上的所有 <img> 元素，而不仅仅是第一个元素吗？

Answer 1

不太确定是否正确理解您的需求。
如果是这样的话：

您希望通过您的 <input>

只有一个

并且您希望这张独特的图像与所有您的 <img>s

那么下面是要走的路：

function previewFile() {
  var preview = document.querySelectorAll('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.addEventListener("load", function () {
    for (var img in preview) {
      preview[img].src = reader.result;
    }
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}

<div>
  <label>Select an Image</label>
  <input type="file" onchange="previewFile()">
</div>

<div>
  <img id="small" src="http://placehold.it/100x100"/>
  <img id="med" src="http://placehold.it/200x200"/>
  <img id="large" src="http://placehold.it/300x300"/>
</div>

要点是：

preview 获得 all <img>s（正如您已经尝试过的那样）
然后我们使用 for() 循环来处理 它们中的每一个（这是你所缺少的）

Answer 2

代码需要遍历文件列表中的所有文件，然后将每个文件（通过 Object-URL）分配给单独的图像元素。

我建议进行以下更改，因为目前确实不需要 FileReader。 URL.createObjectURL() 也可以与 File blob 一起使用，让我们免于头疼：

document.querySelector("input[type=file]").onchange = previewFile;

function previewFile() {

  var files = this.files;                               // "this" = input element
  var parent = document.querySelector(".imageList");    // parent element
  var i = 0, file;
  
  while(file = files[i++]) {                            // iterate over file list
    var img = new Image();                              // create new image instance
    img.src = (URL || webkitURL).createObjectURL(file); // use File blob directly
    parent.appendChild(img);                            // insert image in DOM
  };
}

<div>
  <label>Select an Image 
  <input type="file" multiple>             <!-- make sure multiple is enabled -->
  </label>
</div>

<div class="imageList"></div>

如果你想替换一个图像列表，只需使用querySelectorAll()而不是querySelector()获取图像列表，然后从列表中替换源直到一个运行干燥：

//... as before
var img, images = document.querySelectorAll("img");

while((file = files[i]) && (img = images[i++])) {       // loop until one runs dry
    img.src = (URL || webkitURL).createObjectURL(file); // use File blob directly
};

document.querySelector("input[type=file]").onchange = previewFile;

function previewFile() {

  var files = this.files;                               // "this" = input element
  var parent = document.querySelector(".imageList");    // parent element
  var i = 0, file;
  var img, images = document.querySelectorAll("img");

  while((file = files[i]) && (img = images[i++])) {     // loop until one runs dry
    img.src = (URL || webkitURL).createObjectURL(file); // use File blob directly
  };
}

<div>
  <label>Select an Image 
  <input type="file" multiple>             <!-- make sure multiple is enabled -->
  </label>
</div>

<div class="imageList">
  <img id="small" src="http://placehold.it/100x100"/>
  <img id="med" src="http://placehold.it/200x200"/>
  <img id="large" src="http://placehold.it/300x300"/>
</div>

如何使用 FileReader.readAsDataURL() 将图像的多个实例插入 html？

How to insert multiple instances of an image into html using FileReader.readAsDataURL()?

html

javascript

image

filereader