如何使用javascript在同一HTML頁面上上傳1張圖像+轉換為base64+顯示具有相同ID的同一圖像多次？

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">