如何在多個輸入型別“檔案”中預覽影像-s

我有這個代碼：

const chosenImage = document.getElementById('chosen_image')

for (const input of document.querySelectorAll('input[type=file]')) {
  input.onchange = (e) => {


    if (e.target.files.length) {
      let reader = new FileReader();
      console.log(e.target.nextElementSibling);
      // do stuff
      reader.readAsDataURL(input.files[0]);
      reader.onload = () => {
        chosenImage.setAttribute("src", reader.result);
        e.target.nextElementSibling.textContent = e.target.nextElementSibling.textContent.replace(/False/, input.files[0].name)
      }

    }
  }
}

<div class="section_header">
  <figure class="uploaded_image_container">
    <img id="chosen_image">
  </figure>
  <div class="upload_section_outer">
    <h6>Text U:</h6>
    <div class="upload_section">
      <button id="performance_img_20" onclick="document.getElementById('img_20').click()">Upload image</button>
      <input type="file" accept="image/png, image/jpg, image/svg" id='img_20' style="display:none">
      <label>Upload complete: False</label>
    </div>
  </div>
</div>

<div class="section_header">
  <figure class="uploaded_image_container">
    <img id="chosen_image">
  </figure>
  <div class="upload_section_outer">
    <h6>Text U:</h6>
    <div class="upload_section">
      <button id="performance_img_21" onclick="document.getElementById('img_21').click()">Upload image</button>
      <input type="file" accept="image/png, image/jpg, image/svg" id='img_21' style="display:none">
      <label>Upload complete: False</label>
    </div>
  </div>
</div>

<div class="section_header">
  <figure class="uploaded_image_container">
    <img id="chosen_image">
  </figure>
  <div class="upload_section_outer">
    <h6>Text U:</h6>
    <div class="upload_section">
      <button id="performance_img_19" onclick="document.getElementById('img_19').click()">Upload image</button>
      <input type="file" accept="image/png, image/jpg, image/svg" id='img_19' style="display:none">
      <label>Upload complete: False</label>
    </div>
  </div>
</div>

問題是它只在第一部分預覽，但我需要為每個上傳單獨顯示。此外，文本僅針對第一個上傳的影像發生變化，我不知道為什么。誰能解釋我做錯了什么？

uj5u.com熱心網友回復：

你在這里得到的是第一個 selected_image 元素，而不是第二個甚至第三個。

const chosenImage = document.getElementById('chosen_image'); 
//...
chosenImage.setAttribute("src", reader.result);
//...

推薦使用class，所以可以

const chosenImage = document.getElementsByClassName('chosen_image')
const inputs = document.querySelectorAll('input[type=file]');
for(let i=0;i<inputs.length;i  ){
  input = inputs[i];
  input.onchange = (e) => {
    if (e.target.files.length) {
      let reader = new FileReader();
      console.log(e.target.nextElementSibling);
      reader.readAsDataURL(e.target.files[0]);
      reader.onload = () => {
        chosenImage[i].setAttribute("src", reader.result);
        e.target.nextElementSibling.textContent = e.target.nextElementSibling.textContent.replace(/False/, e.target.files[0].name)
      }
    }
  }
}

在此處輸入影像描述

但用于 of（它在下面的 div 廣告中預覽，而不是在按下按鈕的那個廣告中）

const chosenImage = document.getElementsByClassName('chosen_image')

let i = 0;
for (const input of document.querySelectorAll('input[type=file]')) {
  input.onchange = (e) => {
    if (e.target.files.length) {
      let reader = new FileReader();
      console.log(e.target.nextElementSibling);
      // do stuff
      reader.readAsDataURL(input.files[0]);
      reader.onload = () => {
        chosenImage[i].setAttribute("src", reader.result); //edit here
        e.target.nextElementSibling.textContent = e.target.nextElementSibling.textContent.replace(/False/, input.files[0].name)
      }
      i  ;
    }
  }
}

標籤：javascript html 文件

上一篇：在Windows7上使用powershell2.0下載檔案-來自Microsoft

下一篇：如何在nim中讀取在編譯時以特定檔案結尾的檔案？