1

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 :)

1 respuesta 1

1

Hay que obtener todos los campos tipo file con querySelectorAll() y se puede hacer por nombre del campo, sin tener que usar ID's dinámicos ni clases.

Después recorres la colección HTML obtenida para asignar evento a cada uno. Este evento se dispara solo cuando se selecciona un archivo nuevo, no hay forma de eliminarlo, a menos que se haga un reset del formulario, pero eso es para otro tema y solo se necesitaría validar que el archivo seleccionado sea una imagen, suponiendo que el usuario modificó directamente los campos.

Dentro de la función que maneja el evento usas e.target para identificar el campo que se modificó; usando closest() seleccionas el contenedor padre de campo e imagen y, desde ahí, obtienes la imagen.

Revisa los comentarios para ver lo que se hace en cada paso.

// Obtener todos los campos por nombre
let fotos = document.querySelectorAll('[name="foto[]"]');
// Recorrer para asignar evento
fotos.forEach(foto => foto.addEventListener('change', fotoPreview));
// Función para ejecutar cuando se modifique un campo, recibe evento como parámetro
function fotoPreview(e) {
    // Seleccionar campo que disparó el evento
    let foto = e.target;
    // Crear código para establecer como fuente de imagen
    let imageUrl = URL.createObjectURL(e.target.files[0]);
    // Obtener contenedor común entre campo e imagen por clase
    let parent = foto.closest('.form-group.drag-drop');
    // Obtener imagen desde el contenedor padre
    let image = parent.querySelector('.imgFoto');
    // Asignar fuente de imagen
    image.src = imageUrl;
}
<center>
    <div class="col-md-4" >
        <div class="form-group drag-drop">
            <input type="file" accept="image/*" name="foto[]" class="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">
                <img class="imgFoto" style="width: 128px;height: 128px;">
            </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[]" class="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">
                <img class="imgFoto" style="width: 128px;height: 128px;">
            </span>
        </div>
    </div>
</center>
<div class="col-md-2" ></div>

Nota: Quité estilos que modifican atributos de la imagen (o su contenedor) para que puedas ver que todo funciona correctamente.

1
  • Gracias! Me sirvio perfecto. Commented el 14 jul. 2022 a las 22:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.