HTML中第二个文件输入字段无法预览图片的技术问题

你的问题出在预览函数的选择逻辑上——不管哪个文件输入框触发onchange事件，document.querySelector('img')和document.querySelector('input[type=file]')只会选中页面里第一个匹配的元素。这就导致第二个输入框选的图片永远会覆盖第一个预览图，而第二个<img>标签完全没被用到。

我们可以通过在调用函数时传入当前触发事件的输入框元素，让函数精准定位到对应的预览图片，而不是总是操作第一个元素。

修改后的HTML代码 #

<input id="image" type="file" onchange="previewFile(this)"><br>
<img src="" height="200" alt="Image preview...">
<input id="pic" type="file" onchange="previewFile(this)"><br>
<img src="" height="200" alt="Image preview...">

修改后的JavaScript代码 #

function previewFile(input) {
  // 找到当前输入框对应的预览图：因为input和img之间有<br>标签，所以要跳过它找下一个兄弟元素
  const preview = input.nextElementSibling.nextElementSibling;
  const file = input.files[0];
  const reader = new FileReader();

  reader.addEventListener("load", function() {
    // 将读取到的图片数据赋值给对应预览图的src属性
    preview.src = reader.result;
  });

  // 处理用户取消选择文件的情况，清空预览图
  if (file) {
    reader.readAsDataURL(file);
  } else {
    preview.src = "";
  }
}

补充说明 #

• 传入this参数后，函数能直接拿到触发事件的那个<input>元素，彻底避免了全局选择第一个元素的问题。
• 使用nextElementSibling定位预览图的方式更灵活，就算后续再加更多文件输入框，只要保持input -> <br> -> img的结构，函数都能正常工作。
• 增加了文件存在性判断，避免用户取消选择文件时出现控制台报错。

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