表单多处放置input[type=file]时如何实现对应位置图片预览

页面内id属性必须全局唯一是HTML的基础规范，你重复复用代码片段时，所有上传输入框都用了id="file"、所有预览图标签都用了id="display"，document.getElementById()执行时永远只会匹配到页面中第一个对应id的元素，所以不管在哪个上传框选图，逻辑都会把预览图渲染到第一个img标签上，其余位置自然无法展示。

核心思路是放弃写死固定id的匹配逻辑，通过触发事件的上传输入框，关联到它对应的预览标签即可，以下是两种适配不同场景的写法：

方案1：最小改动适配现有代码 #

直接修改原有函数，接收触发事件的input元素作为参数，通过DOM关联关系找到对应预览图，不需要依赖固定id：

function previewImage(inputEl) {
  // 未选择文件时直接终止逻辑
  if (!inputEl.files?.length) return
  const file = inputEl.files[0]
  const fileReader = new FileReader()
  fileReader.onload = function(event) {
    // 找到和当前input绑定的预览img标签，这里默认img是input的下一个相邻元素
    const previewDom = inputEl.nextElementSibling
    previewDom.src = event.target.result
  }
  fileReader.readAsDataURL(file)
}

对应HTML片段修改如下，把当前触发元素this作为参数传入函数即可，可无限次复用，每组上传预览完全独立：

<input type="file" accept="image/*" onchange="previewImage(this)">
<img class="w-50">

<!-- 第二组上传预览，不需要改id、不需要额外加函数 -->
<input type="file" accept="image/*" onchange="previewImage(this)">
<img class="w-50">

如果你的预览img不是紧跟在input后面，可以给每组上传模块加个统一父容器，调整查找预览元素的逻辑即可，比如结构是：

<div class="upload-item">
  <label>上传凭证</label>
  <input type="file" accept="image/*" onchange="previewImage(this)">
  <p class="tip">支持jpg/png格式，大小不超过2M</p>
  <img class="w-50 upload-preview">
</div>

只需要把JS里查找预览元素的代码替换成下面的就行：

// 先找到当前input所属的上传模块父容器，再在容器内找预览img
const previewDom = inputEl.closest('.upload-item').querySelector('.upload-preview')

方案2：事件委托（适配动态新增上传位场景） #

如果你的表单上传位是后续通过JS动态生成的，不需要给每个input重复绑定onchange事件，只需要给所有上传模块的公共父容器绑定一次事件即可：

// 给所有上传模块的外层容器绑定change事件，这里替换成你页面里实际的外层容器选择器
document.querySelector('.form-container').addEventListener('change', function(e) {
  // 校验触发事件的元素是图片上传输入框
  const target = e.target
  if (target.type !== 'file' || !target.accept.includes('image/*')) return
  if (!target.files?.length) return

  const fileReader = new FileReader()
  fileReader.onload = function(event) {
    const previewDom = target.nextElementSibling
    previewDom.src = event.target.result
  }
  fileReader.readAsDataURL(target.files[0])
})

这种写法下HTML不需要写行内onchange属性，结构更简洁，后续动态新增的上传位也会自动生效，不需要重复绑定事件。

内容的提问来源于stack exchange，提问作者Md Mohtesham Azam