0

estoy haciendo un peque;o blog donde se puedan llegar a subir varias imagenes en una misma entrada, en el formulario lo que hice fue agregar un div y con js agregar funcinoes para que tome la foto y las previsualice, en si funciona perfectamente, pero solo cuando se agrega un Id, no una clase, debido a que lo que quiero es agregar varios div con imagenes de previsualizacion, y obvio no puedo hacerlo ya que no es posible agregar varios Id en un mismo HTML, como podria solucionar el codigo para que funcione de manera correcta

este es el div que contendra la imagen

<div class="photo">
                <label for="foto">Foto:</label>
                    <div class="prevPhoto">
                        <span class="delPhoto notBlock">X</span>
                        <label for="foto"></label>
                    </div>
                    <div class="upimg">
                        <input type="file" name="foto" id="foto">
                    </div>
                    <div id="form_alert"></div>
                </div>

Y este es el codigo JS

$(document).ready(function(){

    //--------------------- SELECCIONAR FOTO ENTRADAS ---------------------
    $("#foto").on("change",function(){
        var uploadFoto = document.getElementById("foto").value;
        var foto       = document.getElementById("foto").files;
        var nav = window.URL || window.webkitURL;
        var contactAlert = document.getElementById('form_alert');
        
            if(uploadFoto !='')
            {
                var type = foto[0].type;
                var name = foto[0].name;
                if(type != 'image/jpeg' && type != 'image/jpg' && type != 'image/png')
                {
                    contactAlert.innerHTML = '<p class="errorArchivo">El archivo no es válido.</p>';                        
                    $("#img").remove();
                    $(".delPhoto").addClass('notBlock');
                    $('#foto').val('');
                    return false;
                }else{  
                        contactAlert.innerHTML='';
                        $("#img").remove();
                        $(".delPhoto").removeClass('notBlock');
                        var objeto_url = nav.createObjectURL(this.files[0]);
                        $(".prevPhoto").append("<img id='img' src="+objeto_url+">");
                        $(".upimg label").remove();
                        
                    }
              }else{
                alert("No selecciono foto");
                $("#img").remove();
              }              
    });

    $('.delPhoto').click(function(){
        $('#foto').val('');
        $(".delPhoto").addClass('notBlock');
        $("#img").remove();

    });

});

La pregunta seria como modificar el div y el js para que pueda tomar varios div con la previsualizacion sin necesidad de repetir un JS para cada uno con una ID distinta

2
  • Tienes una mezcla curiosa de selecciones usando jQuery y selecciones con Javascript "vanilla" curiosa. Por otro lado no acabo de entender el problema: ¿Qué es lo que no funciona? Commented el 6 oct. 2022 a las 11:34
  • @PabloLozano, este mismo codigo lo he usado para otro formulario, en el que solo necesitaba usar un visualizacion previa, pero quiero aplicar esto mismo para otro formulario que tiene varias previsualizaciones al mismo tiempo, intente cambiar los ID o agregar nuevas clases con un mismo nombre y luego usar el getElementsByClass para que funcionen todos con un mismo codigo, pero no he logrado hacer que funcione
    – kian 14
    Commented el 7 oct. 2022 a las 13:56

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.