多file类型input实现图片独立预览的问题求助

核心错误点 #

• 重复ID导致预览图仅显示在第一个区域：HTML中所有预览图片的id="chosen_image"重复，ID在文档中必须唯一，document.getElementById只会返回第一个匹配元素，因此所有上传操作都只会修改第一个<img>的src属性。
• 未建立上传控件与对应预览区域的关联：原JS代码固定修改全局的chosenImage元素，没有根据触发上传的input，定位到其所在section内的预览图片。

修改后的代码 #

HTML部分（修正重复ID，改用class关联预览图） #

<div class="section_header">
  <figure class="uploaded_image_container">
    <img class="preview-image"> <!-- 替换重复ID为class -->
  </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 class="preview-image"> <!-- 替换重复ID为class -->
  </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 class="preview-image"> <!-- 替换重复ID为class -->
  </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>

JS部分（关联当前input所在区域的预览图） #

for (const input of document.querySelectorAll('input[type=file]')) {
  input.onchange = (e) => {
    if (e.target.files.length) {
      const reader = new FileReader();
      // 定位当前input所在的section容器，找到对应预览图
      const section = e.target.closest('.section_header');
      const previewImage = section.querySelector('.preview-image');
      
      reader.readAsDataURL(input.files[0]);
      reader.onload = () => {
        previewImage.setAttribute("src", reader.result);
        // 修改当前input对应的label文本
        e.target.nextElementSibling.textContent = `Upload complete: ${input.files[0].name}`;
      }
    }
  }
}

关键修改说明 #

1. 替换重复ID为class：避免ID冲突，同时方便通过父容器精准定位对应预览图。
2. 通过父容器关联元素：使用closest('.section_header')找到当前上传控件所在的section，再获取该区域内的预览图，确保每个上传操作匹配独立的预览区域。
3. 优化label文本修改：直接拼接文本替代正则替换，更直观且避免匹配异常。

内容的提问来源于stack exchange，提问作者Nicik