使用jQuery实现多图片上传前预览：新增预览覆盖旧图的问题

我明白你的问题了——每次新增上传框选图后，预览总是替换第一张，这是因为你用了固定的#image ID来设置预览图，而ID在页面里是唯一的，所以所有选择操作都会指向第一个<img>元素。咱们来调整代码，让每个上传区域都绑定自己的预览图，这样就能正常显示多张预览了。

问题根源 #

你的readURL函数里用$('#image')选择预览图，但页面中ID是唯一标识，不管哪个上传框选图，都会修改第一个带#image的图片元素，导致预览覆盖。同时，新增的上传表单里没有包含预览图元素，这也是问题之一。

修改后的完整代码 #

1. 初始HTML结构 #

<div class="product-image"> 
 <div class="form-group"> 
  <div class="Image-upload"> 
   <span class="image-option-close">&times;</span> 
   <label for="product_images"> Upload Image </label> 
   <!-- 去掉唯一ID，改用类名，初始隐藏 -->
   <img src="" class="preview-img h-100" alt="" style="display:none;"> 
   <!-- 去掉重复ID，name保持数组格式 -->
   <input type="file" accept="image/*" name="product_images[]" onchange="readURL(this);"> 
  </div> 
 </div> 
</div>

2. JavaScript代码 #

$(function () { 
 $(this).on('click', '#add-product-image', function () { 
  // 新增的表单要包含preview-img元素，去掉重复ID
  var form = '<div class="form-group"><div class="Image-upload"><span class="image-option-close">&times;</span><label class="">Upload Image</label><img src="" class="preview-img h-100" alt="" style="display:none;"><input type="file" accept="image/*" name="product_images[]" onchange="readURL(this);"></div></div>'; 
  $('.product-image').append(form) 
 }); 
 $(this).on('click', '.image-option-close', function () { 
  $(this).closest('.Image-upload').parent().remove(); // 更稳妥的删除方式
 }) 
}); 

function readURL(input) { 
 if (input.files && input.files[0]) { 
  var reader = new FileReader(); 
  // 通过当前input找到所在容器内的预览图，避免全局选择
  var $previewImg = $(input).closest('.Image-upload').find('.preview-img');
  
  reader.onload = function (e) { 
   $previewImg.attr('src', e.target.result).show(); // 设置图片并显示
  }; 
  reader.readAsDataURL(input.files[0]); 
 } 
}

关键改动点 #

• 把唯一的#image ID替换为类名preview-img，这样每个上传区域都能有自己的预览图元素。
• 新增上传表单时，必须包含preview-img元素，否则新上传框选图后没有对应的预览位置。
• 修改readURL函数，使用closest()和find()方法，基于当前点击的input元素定位到它所属的预览图，而不是全局查找ID。
• 初始预览图设置display:none，选图后再显示，提升用户体验。

现在你再测试一下，每个上传框选择图片后，都会在自己的区域显示对应的预览图，不会再覆盖第一张了。

内容的提问来源于stack exchange，提问作者Shafayet Al-Anik