how to preview images in multiple input type "file"-s-CodePudding

I have this code:

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 >
  <figure >
    <img id="chosen_image">
  </figure>
  <div >
    <h6>Text U:</h6>
    <div >
      <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 >
  <figure >
    <img id="chosen_image">
  </figure>
  <div >
    <h6>Text U:</h6>
    <div >
      <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 >
  <figure >
    <img id="chosen_image">
  </figure>
  <div >
    <h6>Text U:</h6>
    <div >
      <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>

the problem is that it previews only on the first section, but I need to display on every individually for each upload. Additionally the text only changes for the first uploaded image and I have no clue why. Can anyone explain what I am doing wrong?

CodePudding user response：

What you get here is the first chosen_image element, not the second or even the third.

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

It is recommended to use class, So it can be

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

enter image description here

but use for of(it is previewing in the following div ad not in the one the button is pushed)

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