Estoy tratando de que cada div muestre una imagen cargada diferente, pero cuando intento cargar una imagen con el segundo div, cambia la imagen del primer div y no le sucede nada al segundo div.
<div class="user-img">
<img src="./images/image.jpg" alt="Avatar" id="photo">
<input type="file" id="file" accept="image/*">
<label for="file" id="uploadbtn"><i class="fas fa-camera"></i></label>
</div>
<div class="user-img">
<img src="./images/image.jpg" alt="Avatar" id="photo">
<input type="file" id="file" accept="image/*">
<label for="file" id="uploadbtn"><i class="fas fa-camera"></i></label>
</div>
<script>
const img = document.querySelector('#photo');
const file = document.querySelector('#file');
file.addEventListener('change', function(){
const chosenFile = this.files[0];
if(chosenFile){
const reader = new FileReader();
reader.addEventListener('load', function(){
img.setAttribute('src',reader.result);});
reader.readAsDataURL(chosenFile);
}
});
</script>
No puede tener dos elementos con el mismo ID de archivo y foto. Las identificaciones deben ser únicas. En este caso, debería utilizar clases en su lugar.
Luego use document.getElementsByClassName() para recibir una matriz de elementos que puede iterar y agregar el detector de eventos a los elementos del archivo.
Cambie sus elementos <img> para usar nombres de clase, en lugar de ID. Ex:
<img src="./images/image.jpg" alt="Avatar" class="photo">
Luego tome sus imágenes usando una llamada document.getElementsByClassName() como la siguiente
const imgs = document.getElementsByClassName('photo');
Luego puede recorrer la matriz imgs y establecer el atributo src, así
imgs.forEach((img) => {
img.setAttribute('src', reader.result);
});