Funciona bien pero solo muestra la imagen una vez... Gracias por su ayuda
<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">Esto podría funcionar como se esperaba. Elija un archivo de imagen y use FileReader para leer datos de imagen.
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">