JavaScript实现多文件输入框图片独立预览与状态更新教程

<div class="section_header">
  <figure class="uploaded_image_container">
    <img class="chosen_image" alt="图片预览"> <!-- 使用 class="chosen_image" -->
  </figure>
  <div class="upload_section_outer">
    <h6>图片上传区域 1:</h6>
    <div class="upload_section">
      <button onclick="document.getElementById('img_20').click()">选择图片</button>
      <input type="file" accept="image/png, image/jpg, image/svg" id='img_20' style="display:none">
      <label>上传状态: 未选择</label> <!-- 初始状态文本 -->
    </div>
  </div>
</div>

<div class="section_header">
  <figure class="uploaded_image_container">
    <img class="chosen_image" alt="图片预览"> <!-- 使用 class="chosen_image" -->
  </figure>
  <div class="upload_section_outer">
    <h6>图片上传区域 2:</h6>
    <div class="upload_section">
      <button onclick="document.getElementById('img_21').click()">选择图片</button>
      <input type="file" accept="image/png, image/jpg, image/svg" id='img_21' style="display:none">
      <label>上传状态: 未选择</label> <!-- 初始状态文本 -->
    </div>
  </div>
</div>

<div class="section_header">
  <figure class="uploaded_image_container">
    <img class="chosen_image" alt="图片预览"> <!-- 使用 class="chosen_image" -->
  </figure>
  <div class="upload_section_outer">
    <h6>图片上传区域 3:</h6>
    <div class="upload_section">
      <button onclick="document.getElementById('img_19').click()">选择图片</button>
      <input type="file" accept="image/png, image/jpg, image/svg" id='img_19' style="display:none">
      <label>上传状态: 未选择</label> <!-- 初始状态文本 -->
    </div>
  </div>
</div>

// 1. 选择所有图片预览元素和文件输入框
// document.getElementsByClassName 返回一个 HTMLCollection，它是一个实时集合。
const previewImages = document.getElementsByClassName('chosen_image');
// document.querySelectorAll 返回一个 NodeList，它是一个静态集合。
const fileInputs = document.querySelectorAll('input[type=file]');

// 2. 遍历每个文件输入框，并为其添加事件监听器
fileInputs.forEach((input, index) => {
  // 使用 addEventListener 是更推荐的方式，因为它允许添加多个事件处理函数。
  input.addEventListener('change', (event) => {
    // 确保用户已经选择了一个文件
    if (event.target.files.length > 0) {
      const file = event.target.files[0]; // 获取选择的第一个文件
      const reader = new FileReader();     // 创建 FileReader 实例

      // 3. 读取文件内容为 Data URL
      reader.readAsDataURL(file);

      // 4. 当文件读取完成时触发
      reader.onload = () => {
        // 更新对应的图片预览元素
        // 由于 fileInputs 和 previewImages 都是按DOM顺序获取的，
        // 它们的索引是对应的，因此可以使用 'index' 来精确匹配。
        previewImages[index].setAttribute("src", reader.result);

        // 更新状态标签文本
        // event.target 指向当前的 <input type="file"> 元素。
        // nextElementSibling 属性可以获取紧随其后的兄弟元素，
        // 在本例中即是对应的 <label> 元素。
        const statusLabel = event.target.nextElementSibling;
        if (statusLabel && statusLabel.tagName === 'LABEL') {
          // 将状态文本替换为文件名，提供更清晰的反馈
          statusLabel.textContent = `上传状态: ${file.name}`;
        }
      };
    } else {
      // 如果用户取消选择文件，可以清除预览或恢复默认状态
      previewImages[index].setAttribute("src", ""); // 清空图片
      const statusLabel = event.target.nextElementSibling;
      if (statusLabel && statusLabel.tagName === 'LABEL') {
        statusLabel.textContent = `上传状态: 未选择`; // 恢复初始状态
      }
    }
  });
});