頁面上的 JS 多個文件輸入元素 - 輸入在第一個輸入之后不起作用（預覽圖像未顯示）

Question

嘗試獲取多個文件輸入及其相應的預覽以加載。 我通過類名獲取元素，但我認為我沒有正確地迭代它們。 我不想為元素使用唯一 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>

Answer 1

很少注意到我的朋友。 首先，您需要使用let關鍵字在循環內聲明變量i ，否則它將是全局范圍的。

在您的循環中，不是總是將事件偵聽器分配給第一個元素，而是需要通過編寫fileTag[i]而不是fileTag[0]來使其動態化

此外，當changeImage時，還將i變量傳遞給它，因此在此 function 的主體內，您可以更改精確圖像的 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]);
}