0

Estimados estaría agradecido de su ayuda

Tengo el siguiente input de tipo archivos, donde cargo ciertas imágenes al sistema.

<input type="file" name="imagenes" id="imagenes" class="input-inputfile" accept=".jpg" multiple>

Estoy intentando limitar el ancho de subida de las imágenes a 1200px como mínimo. Para ello utilizo el siguiente script. Donde si subo de 1 a 5 imágenes, deseo evaluar su ancho, quiero que si una de las imágenes seleccionadas en el input tiene un ancho menor al establecido, se detenga el ciclo for y solo me muestre un alert indicando lo ocurrido. Pero actualmente me muestra 1 alert por cada imagen que no cumpla la condición, puse un break después del alert, pero me arroja el error Illegal break statement

$('.input-inputfile').change(function(){
            var imagen = document.getElementById("imagenes").files;
            var elemento = '.nombre-principal';
            if(this.files.length === 0){
                $(this).parent().children().children('.nombre-principal').html('Seleccione un archivo...'); 
                document.getElementById('imagenes').value = ''
            }else if(this.files.length === 1){
                var nombrearchivo = abreviar_texto(this.files[0].name,"16px Roboto",elemento) 
                for (x = 0; x < imagen.length; x++) {
                    loadImage(imagen[x], function(result){
                        if(result < 1200){
                            alert('La imagen debe tener un ancho minimmo de 1200px')
                            $(this).parent().children().children('.nombre-principal').html('Seleccione un archivo...'); 
                            document.getElementById('imagenes').value = ''
                        }else{
                            $('.nombre-principal').html(nombrearchivo);                             
                        }   
                    })
                }   
            }else if(this.files.length > 1 && this.files.length <= 5){
                for (x = 0; x < imagen.length; x++) {
                    loadImage(imagen[x], function(result){
                        if(result < 1200){
                            alert('Las imagenes seleccionadas deben tener un ancho minimmo de 1200px')
                            break
                            // return false;
                            // $(this).parent().children().children('.nombre-principal').html('Seleccione un archivo...'); 
                            // document.getElementById('imagenes').value = ''
                        }else{
                            // $('.nombre-principal').html(nombrearchivo);                              
                        }   
                    })

                    
                } 
                // $(this).parent().children().children('.nombre-principal').html('('+this.files.length+') Imagenes Seleccionadas');                
            }else if(this.files.length > 5){
                document.getElementById('imagenes').value = ''
                $(this).parent().children().children('.nombre-principal').html('Seleccione un archivo...'); 
                alert('Puede seleccionar maximo 5 imagenes')
            }
        })


function loadImage(imagen, callback) {
        var _URL = window.URL || window.webkitURL;
        var img = new Image();
        let ancho,alto;
        img.src = _URL.createObjectURL(imagen);
        img.onload = function () {
            var ancho = img.width
            callback(ancho)
        }
    }
4
  • prueba quitando el break y poniendo x = imagen.length para que pare los ciclos
    – masterguru
    Commented el 16 may. 2022 a las 22:22
  • reemplace el break por x = imagen.length, pero de igual forma me muestra 1 alert por cada imagen cargada en el input Commented el 16 may. 2022 a las 22:26
  • Pues a mi me funciona: jsfiddle.net/aq20ev6c
    – masterguru
    Commented el 16 may. 2022 a las 22:29
  • Exacto de esa forma si funciona , pero al estar la validación dentro de la función loadImage, da el error Illegal break statement Commented el 16 may. 2022 a las 22:33

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.