Estoy tratando de obtener archivos del usuario usando <input type="file"/> . Se pueden cargar varios archivos. Después de cargar, he usado este código que encontré en la pila que me permite mostrar las imágenes cargadas. Inicialmente, el código consistía en cargar una imagen y mostrarla.
Para visualización múltiple, he intentado clonar el elemento div principal y asignarle una nueva identificación y usando el objeto FileReader he intentado asignar src a la etiqueta de imagen. Este es mi código.
Código HTML :
<div id="picsContainer" style="display:flex;"> <div style="display:none;" id="showPic"> <img class="file-upload-image" src="#" id="imgTag0" alt="your image" /> <div class="image-title-wrap"> <button type="button" onclick="removeUpload()" class="remove-image">Remove <span class="image-title"> Image</span></button> </div> </div> </div>Código JS:
function previewImage(element){ if(element.files[0]){ console.log(element) for(i=0;i<element.files.length;i++){ var main=document.getElementById("showPic"); var cloned=main.cloneNode(true) const reader = new FileReader(); console.log(reader) reader.readAsDataURL(element.files[i]) cloned.id="showPic"+i; cloned.children[0].id=i; reader.onload=()=>{ cloned.children[0].src=reader.result; } cloned.style.display="block"; document.getElementById("picsContainer").appendChild(cloned); } } }La función se llama en el momento de la carga de la imagen usando onchange. El problema es que en este código solo el último elemento de clonación agregado muestra la vista previa de la imagen y todos los demás elementos anteriores ni siquiera obtienen nada en su atributo src. Solo muestra un "#" en el atributo src.
¿Qué estoy haciendo mal aquí?
FileList {0: File, 1: File, 2: File, length: 3} 0: File {name: 'Screenshot (4).png', lastModified: 1633166516919, lastModifiedDate: Sat Oct 02 2021 14:51:56 GMT+0530 (India Standard Time), webkitRelativePath: '', size: 716548, …} 1: File {name: 'Screenshot (5).png', lastModified: 1633166527063, lastModifiedDate: Sat Oct 02 2021 14:52:07 GMT+0530 (India Standard Time), webkitRelativePath: '', size: 511571, …} 2: File {name: 'Screenshot (6).png', lastModified: 1633166534410, lastModifiedDate: Sat Oct 02 2021 14:52:14 GMT+0530 (India Standard Time), webkitRelativePath: '', size: 649065, …} length: 3Esto es lo que estoy viendo si registro los archivos element.files en la consola
Me parece que podría estar sobrescribiendo su matriz de imágenes, pero no puedo decirlo con seguridad sin echar un vistazo al resto de su código.
Mi sugerencia es que, en lugar de clonar el div, asigne su matriz de imágenes y cree los componentes según sea necesario.
Tal vez algo como esto (ES6):
const previewImage = (element) => { const container = document.GetElementById('picsContainer') const reader = new FileReader(); return element.files.map((image, index) => { // Create a new div const newElement = document.createElement('div') newElement.key = index newElement.id = `showPic${index}` newElement.style.display = 'block' // Create the image component const img = document.createElement('img') newElement.appendChiled(img) reader.readAsDataURL(image) reader.onload = () => { img.src = reader.result; } container.appendChild(newElement) } }Esto debería funcionar, pero si obtiene algún error, hágamelo saber e intentaré ayudarlo nuevamente. Además, en lugar de usar el lector de archivos, puede crear un blob para cada imagen nueva y obtener una URL personalizada para ellas.
ACTUALIZAR
Dado que su FileList es un objeto en el que cada clave de archivo es un número y una longitud al final, puede adaptar mi solución de esta manera:
const previewImage = (element) => { const container = document.getElementById('picsContainer') for (let i=0; i<element.files.FileList.length; i++){ const reader = new FileReader(); // Create a new div const newElement= document.createElement('div') newElement.key = i newElement.id = `showPic${i}` newElement.style.display = 'block' // Create the image component const img = document.createElement('img') newElement.appendChild(img) reader.readAsDataURL(element.files.FileList[i]) reader.onload = () => { img.src = reader.result; } container.appendChild(newElement) } }Dejaré la solución original ya que debería funcionar para una variedad de archivos.