基于Bootstrap的图片预览故障：上传图片无法替换占位图

问题根源 #

1. HTML元素ID错误：

   • 你的<input type="file">标签写了两个重复的id属性（inputGroupFile01和inputimg），这违反了HTML规范（一个元素只能有唯一ID）。
   • 用于显示占位图的<img>没有设置ID，导致JS代码无法定位到正确的图片元素。

2. 事件监听绑定对象错误：
   你把change事件绑定在了<label>（id="uploader"）上，但change事件只会由文件选择框（<input type="file">）触发——点击标签只是唤起文件选择弹窗，并不会触发自身的change事件。

修正后的代码 #

HTML代码

</div>
<div class="col-md-6">
  <div class="input-group mb-3" style="width: 40%;">
    <label class="input-group-text" for="inputGroupFile01" id="uploader">Upload</label>
    <input type="file" class="form-control" id="inputGroupFile01">
    <img src="profile.jpg" class="img-fluid" alt="用户头像" id="profileImg">
  </div>      
</div>

JS代码

document.getElementById('inputGroupFile01').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('profileImg').src = e.target.result;
        };
        reader.readAsDataURL(file);
    }
});

修正说明 #

• 移除了<input>上重复的id属性，给占位图<img>添加了唯一IDprofileImg，确保JS能精准定位到需要替换的图片。
• 将change事件绑定到文件选择框上，保证用户选择文件后能触发后续的图片替换逻辑。
• 调整JS代码中的元素选择器，指向正确的图片元素更新src属性。

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