Un gusto. Les explico, tengo un Codigo que se encarga de subir una Imagen y esta se previsualiza.
<center>
<div class="col-md-4" >
<div class="form-group drag-drop">
<input type="file" accept="image/*" name="foto[]" id="foto1" class="inputFoto form-control" required>
<span class="fa-stack fa-2x span1" id="span1">
<i class="fa fa-cloud fa-stack-2x bottom pulsating"></i>
<i class="fa fa-circle fa-stack-1x top medium"></i>
<i class="fa fa-arrow-circle-up fa-stack-1x top"></i>
</span>
<span class="fa-stack fa-2x span2" id="span2"style="display:none;">
<img id="imagenPrevisualizacion1" style="width: 128px;height: 128px; z-index: 3px;margin-top: -0.5em;margin-left: -1em; margin-top:-50%;" class="imgFoto">
</span>
</div>
</div>
</center>
<div class="col-md-2" ></div>
<center>
<div class="col-md-4" ><div class="form-group drag-drop">
<input type="file" accept="image/*" name="foto[]" id="foto2" class="inputFoto form-control" required>
<span class="fa-stack fa-2x span1" id="span3">
<i class="fa fa-cloud fa-stack-2x bottom pulsating"></i>
<i class="fa fa-circle fa-stack-1x top medium"></i>
<i class="fa fa-arrow-circle-up fa-stack-1x top"></i>
</span>
<span class="fa-stack fa-2x span2" id="span4"style="display:none;">
<img id="imagenPrevisualizacion2" style="width: 128px;height: 128px;z-index: 3px;margin-top: -0.5em;margin-left: -1em; margin-top:-50%;" class="imgFoto">
</span>
</div>
</div>
</center>
Este es el trozo del Formulario.
El Problema se presenta al momento que se clona estos campos, debido a que estas imagenes van con un Input indicando un Alias. Quise hacer el Codigo Dinamico por clases para no hacerlo por ID, pero me arroja error.
var inputFoto = document.getElementsByClassName("inputFoto").length,
imgFoto = document.getElementsByClassName("imgFoto").length,
span1 = document.getElementsByClassName("span1").length,
span2 = document.getElementsByClassName("span2").length;
for (var i = 0; i < inputFoto.length; i++) {
console.log(i);
// Escuchar cuando cambie
inputFoto[i].addEventListener("change", () => {
// Los archivos seleccionados, pueden ser muchos o uno
const archivos = this.files;
// Si no hay archivos salimos de la función y quitamos la imagen
if (!archivos || !archivos.length) {
imgFoto[i].src = "";
return;
}
// Ahora tomamos el primer archivo, el cual vamos a previsualizar
const primerArchivo = archivos[0];
// Lo convertimos a un objeto de tipo objectURL
const objectURL = URL.createObjectURL(primerArchivo);
// Y a la fuente de la imagen le ponemos el objectURL
imgFoto[i].src = objectURL;
//Cambiamos los Estados de los Span
span1[i].style.display = "none";
span2[i].style.display = "inline-block";
console.log("Finalizado");
});
}
Error: Uncaught TypeError: imgFoto[i] is undefined.
Antes cuando no era requerido el que se clonara estos campos lo tenia de esta manera:
const $seleccionArchivos = document.querySelector("#foto1"),
$imagenPrevisualizacion = document.querySelector(
"#imagenPrevisualizacion1"
);
$seleccionArchivos.addEventListener("change", () => {
// Los archivos seleccionados, pueden ser muchos o uno
const archivos = $seleccionArchivos.files;
// Si no hay archivos salimos de la función y quitamos la imagen
if (!archivos || !archivos.length) {
$imagenPrevisualizacion.src = "";
return;
}
// Ahora tomamos el primer archivo, el cual vamos a previsualizar
const primerArchivo = archivos[0];
// Lo convertimos a un objeto de tipo objectURL
const objectURL = URL.createObjectURL(primerArchivo);
// Y a la fuente de la imagen le ponemos el objectURL
$imagenPrevisualizacion.src = objectURL;
//Cambiamos los Estados de los Span
document.getElementById("span1").style.display = "none";
document.getElementById("span2").style.display = "inline-block";
});
Funcionaba Bien. Gracias de Antemano PD: Antes tenia que repetir el Codigo en caso de que se requiriera más de una foto. Mi Idea es que funcione sin necesidad de repetir codigo o estar asignando dinamicamente un ID. Si pueden darme una mejor opción es bienvenido :)