页面上的 JS 多个文件输入元素 - 输入在第一个输入之后不起作用（预览图像未显示）答案

【问题标题】：JS multiple file input elements on page - inputs not working past first input (preview image not showing)页面上的 JS 多个文件输入元素 - 输入在第一个输入之后不起作用（预览图像未显示）
【发布时间】：2022-01-15 07:42:40
【问题描述】：

尝试获取多个文件输入及其相应的预览以加载。我通过类名获取元素，但我认为我没有正确地迭代它们。我不想为元素使用唯一 ID，因为我将动态地将它们添加到页面中，并且无法为每个输入硬编码唯一 ID。如果可以请编辑我的代码或告诉我我做错了什么。谢谢。下面的代码。 https://codepen.io/pfbarnet/pen/VwMgmbP

var fileTag = document.getElementsByClassName("filetag"), i,
    preview = document.getElementsByClassName("preview"), i;


for (i = 0; i < fileTag.length; ++i) {
    //check if fileTag null
    fileTag[0].addEventListener("change", function () {
      changeImage(this);
    });
  

  function changeImage(input) {
    var reader;

    if (input.files && input.files) {
      reader = new FileReader();
      reader.onload = function (e) {
        preview[0].setAttribute("src", e.target.result);
      };
}
      reader.readAsDataURL(input.files[0]);
    
  }
}

<input type='file' class='filetag'><img src='test' class='preview'/></input>

<input type='file' class='filetag'><img src='test' class='preview'/></input>

【问题讨论】：

fileTag[0] 应该是fileTag[i]

标签： javascript html file input

【解决方案1】：

很少有人注意到我的朋友。首先，您需要在循环内使用 let 关键字声明变量 i，否则它将是全局范围的。

在您的循环中，不是总是将事件侦听器分配给第一个元素，而是需要通过编写 fileTag[i] 而不是 fileTag[0] 来使其动态化

另外，当changeImage被调用时，还要将i变量传递给它，所以在这个函数的主体内，你可以改变精确图像的src。

看看下面的代码。

for (let i = 0; i < fileTag.length; ++i) { // <- Declare with a let keyword
    fileTag[i].addEventListener("change", function () {
      changeImage(this, i); // <- HERE
    });
}

在这里，使用i 指示您正在变异的确切元素，例如图像和文件输入

function changeImage(input, i) {
  console.log(input);
  var reader;

  if (input.files && input.files) {
    reader = new FileReader();
    reader.onload = function (e) {
      preview[i].setAttribute("src", e.target.result);
    };
  }
  reader.readAsDataURL(input.files[i]);
}

【讨论】：