如何基于元素ID实现上传图片与对应展示图的关联显示？

问题出在你当前的代码里，每次上传图片都会同时更新两个img的src，所以不管选哪个input，两张图都会变成同一张。要解决这个问题，只需要在readURL函数里根据触发上传的input的ID，判断应该更新哪个展示图片即可。

方法一：通过ID直接匹配（适合当前固定场景） #

修改你的JavaScript代码，在文件读取完成的回调里，根据上传控件的ID选择对应的展示图片：

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      // 根据上传控件ID匹配对应展示图片
      if (input.id === 'imgInput') {
        $('#person').attr('src', e.target.result);
      } else if (input.id === 'emzaInput') {
        $('#emza').attr('src', e.target.result);
      }
    }

    reader.readAsDataURL(input.files[0]);
  }
}
$("#imgInput").change(function() {
  readURL(this);
});
$("#emzaInput").change(function() {
  readURL(this);
});

原理：利用input.id判断当前触发上传的控件，只更新对应ID的img元素的src属性，避免同时修改两个图片的地址。

方法二：通过数据属性实现灵活匹配（适合扩展场景） #

如果以后可能新增更多上传控件，可以给每个input添加data-target属性，指向对应的展示图片选择器，这样不用硬编码ID判断：

修改HTML中的input元素： #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="col-4">
  <div class="col-auto p-1 col-3">
    <label class="col-form-labels">personal image</label>
  </div>
  <div class="col-auto p-1 col-5">
    <!-- 添加data-target属性指向对应图片 -->
    <input class="myform-control" type="file" id="imgInput" data-target="#person">
  </div>
  <div class="col-auto p-1 col-4">
    <img id="person" src="..." class="img-thumbnail float-end rounded" alt="...">
  </div>
  <div class="col-4" style="display: flex; flex-direction: row;">
    <div class="col-auto p-2">
      <label class="col-form-labels">signiture image</label>
    </div>
    <div class="col-auto p-2">
      <!-- 添加data-target属性指向对应图片 -->
      <input class="myform-control" type="file" id="emzaInput" data-target="#emza">
    </div>
    <div class="col-auto p-2">
      <img id="emza" src="..." class="img-thumbnail float-end rounded" alt="...">
    </div>
  </div>
</div>

修改JavaScript代码： #

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    // 获取当前input对应的目标图片选择器
    var targetImg = $(input).data('target');
    reader.onload = function(e) {
      $(targetImg).attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}
// 统一绑定两个input的change事件
$("#imgInput, #emzaInput").change(function() {
  readURL(this);
});

原理：通过data-target属性建立上传控件和展示图片的关联，代码更灵活，后续新增控件只需添加对应属性即可，无需修改函数逻辑。

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