如何上传1图像+转换为base64 +显示相同的图像与相同的ID多次在同一HTML页面与javascript?<

Question

它工作得很好，但只显示一次图像…谢谢你的帮助

<input type="file" id="file-upload" class="upload-file bg-highlight shadow-s rounded-s " accept="image/*">
<img id="image-data" src="images/empty.png" class="img-fluid">
<img id="image-data" src="images/empty.png" class="img-fluid">
<img id="image-data" src="images/empty.png" class="img-fluid">
<img id="image-data" src="images/empty.png" class="img-fluid">

Answer 1

这可以正常工作。选择一个镜像文件，使用FileReader读取镜像数据

document.getElementById('file-upload').addEventListener('change', e => {
const file = e.target.files[0];
const reader = new FileReader();
reader.addEventListener("load", function () {
document.querySelectorAll('#image-data').forEach(i => i.src = reader.result);
});
if (file) {
reader.readAsDataURL(file);
}
});

#image-data { width: 100px; height: 100px; }

<input type="file" id="file-upload" class="upload-file bg-highlight shadow-s rounded-s " accept="image/*">
<img id="image-data" src="images/empty.png" class="img-fluid">
<img id="image-data" src="images/empty.png" class="img-fluid">
<img id="image-data" src="images/empty.png" class="img-fluid">
<img id="image-data" src="images/empty.png" class="img-fluid">