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

然后下面是要走的路：

＆＃13;

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

＆＃13;

<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>

＆＃13;

要点是：

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

Answer 2

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

如果您想要替换图像列表，只需使用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
};

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何使用FileReader.readAsDataURL（）将多个图像实例插入到html中？

2 个答案: