如何使用HTML和Javascript实现多图片分独立按钮按顺序上传

你现有代码的问题在于readURL函数中固定选中了#image1和#image2两个图片元素，任意上传按钮触发提交时，都会同时修改两张图片的显示内容，自然无法实现单按钮对应单图片的需求。

JS代码 #

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    // 获取当前触发上传的input元素对应的同层级图片
    const $targetImg = $(input).siblings('img');
    reader.onload = function(e) {
      $targetImg
        .attr('src', e.target.result)
        .width(300)
        .height('auto');
    };
    reader.readAsDataURL(input.files[0]);
  }
}

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 第一个上传组 -->
<div class="upload-container">
  <img src="..." alt="Profile Image1" class="profile-img">
  <input type='file' class='uploader' onchange="readURL(this);" />
  <div class="overlay">
    <i class="fas fa-pencil-alt text"></i>
  </div>
</div>

<!-- 第二个上传组 -->
<div class="upload-container">
  <img src="..." alt="Profile Image2" class="profile-img">
  <input type='file' class='uploader' onchange="readURL(this);" />
  <div class="overlay">
    <i class="fas fa-pencil-alt text"></i>
  </div>
</div>

<!-- 后续要加更多上传组，直接复制上面的upload-container结构即可 -->

• 移除了硬编码的ID选择逻辑，通过DOM节点的同级关联关系自动匹配对应图片，新增上传项无需修改JS代码
• 统一了容器、图片、上传按钮的类名，复用性和可维护性更强
• 调整了图片高度设置为自适应，避免图片拉伸变形

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