Intentando obtener múltiples entradas de archivos y sus vistas previas correspondientes para cargar. Obtengo elementos por nombre de clase, pero no creo que los esté iterando correctamente. No quiero usar identificaciones únicas para los elementos, ya que los agregaré a la página dinámicamente y no puedo codificar identificaciones únicas para cada entrada. Si pudiera editar mi código o decirme qué estoy haciendo mal. Gracias. Código abierto a continuación. https://codepen.io/pfbarnet/pen/VwMgmbP
var fileTag = document.getElementsByClassName("filetag"), i, preview = document.getElementsByClassName("preview"), i; for (i = 0; i < fileTag.length; ++i) { //check if fileTag null fileTag[0].addEventListener("change", function () { changeImage(this); }); function changeImage(input) { var reader; if (input.files && input.files) { reader = new FileReader(); reader.onload = function (e) { preview[0].setAttribute("src", e.target.result); }; } reader.readAsDataURL(input.files[0]); } } <input type='file' class='filetag'><img src='test' class='preview'/></input> <input type='file' class='filetag'><img src='test' class='preview'/></input>Pocos notec mi amigo. Primero debe declarar su variable i dentro del ciclo con una palabra clave let , de lo contrario, tendrá un alcance global.
En su bucle, en lugar de asignar siempre un detector de eventos al primer elemento, debe hacerlo dinámico escribiendo fileTag[i] en lugar de fileTag[0]
Además, cuando se llama a changeImage , también pásele la variable i , de modo que dentro del cuerpo de esta función, puede cambiar el src de la imagen exacta.
Echa un vistazo al código de abajo.
for (let i = 0; i < fileTag.length; ++i) { // <- Declare with a let keyword fileTag[i].addEventListener("change", function () { changeImage(this, i); // <- HERE }); } Y aquí, use i para indicar qué elemento exacto está mutando, por ejemplo, la imagen y el archivo de entrada
function changeImage(input, i) { console.log(input); var reader; if (input.files && input.files) { reader = new FileReader(); reader.onload = function (e) { preview[i].setAttribute("src", e.target.result); }; } reader.readAsDataURL(input.files[i]); }