如何用JavaScript实现图片转base64后在HTML页多个同IDimg标签重复展示

HTML 规范明确要求页面内的 id 属性必须全局唯一，你使用 document.getElementById('image-data') 获取元素时，浏览器只会返回匹配到的第一个 img 标签，所以只会更新第一张图片的展示内容。

第一步：修正HTML代码（推荐，符合规范） #

把重复的 id="image-data" 改为 class 标识，避免id冲突：

<input type="file" id="file-upload" class="upload-file bg-highlight shadow-s rounded-s " accept="image/*">

<img class="img-fluid image-data" src="images/empty.png">
<img class="img-fluid image-data" src="images/empty.png">
<img class="img-fluid image-data" src="images/empty.png">
<img class="img-fluid image-data" src="images/empty.png">

第二步：编写对应的JavaScript逻辑 #

监听上传控件的文件选择事件，将图片转为base64后遍历更新所有目标img标签的src属性：

// 获取上传控件元素
const uploadInput = document.getElementById('file-upload');
// 监听文件选择事件
uploadInput.addEventListener('change', function(e) {
  // 拿到选中的文件
  const selectedFile = e.target.files[0];
  if (!selectedFile) return;
  // 校验是否为图片
  if (!selectedFile.type.startsWith('image/')) {
    alert('请选择图片格式的文件');
    return;
  }
  // 初始化FileReader转base64
  const reader = new FileReader();
  reader.onload = function(ev) {
    const base64Url = ev.target.result;
    // 选中所有需要更新的img标签
    const targetImgs = document.querySelectorAll('.image-data');
    // 遍历给每个img赋值src
    targetImgs.forEach(img => {
      img.src = base64Url;
    });
  };
  reader.readAsDataURL(selectedFile);
});

如果你暂时不想修改HTML（非常不推荐，重复id属于不规范写法，可能引发其他未知问题），也可以将获取目标img的选择器改为 document.querySelectorAll('[id="image-data"]')，即可匹配所有设置了该id的元素。

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