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 return después del alert, pero igual sigue mostrando 1 alerta por imagen

$('.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++) {
                    var _URL = window.URL || window.webkitURL;
                    var img = new Image();
                    let ancho,alto;
                    img.src = _URL.createObjectURL(imagen[x]);
                    img.onload = function () {
                        ancho = img.width;
                        alto = img.height;
                        if(ancho < 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++) {
                    var _URL = window.URL || window.webkitURL;
                    var img = new Image();
                    let ancho,alto;
                    img.src = _URL.createObjectURL(imagen[x]);
                    img.onload = function () {
                        ancho = img.width;
                        alto = img.height;
                        if(ancho < 1200){
                            alert('Las imagenes seleccionadas deben tener un ancho minimmo de 1200px')
                            return;
                            // $(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')
            }
        })
6
  • Dentro de un ciclo for usa break para salir del ciclo o continue para saltarte esa iteracion y continuar con el resto Commented el 16 may. 2022 a las 17:47
  • donde puse el return, había puesto break, pero me salía este error Illegal break statement Commented el 16 may. 2022 a las 17:50
  • Porque estas usando break desde dentro de la funcion. Haz que la funcion retorne false y pon un if para evaluar si img.onload es false break Commented el 16 may. 2022 a las 17:54
  • Se como poner un return false, pero como lo evaluó después ?, ya que en si es img.onload el que retornar un valor, pero ahi esta mi traba Commented el 16 may. 2022 a las 18:50
  • Entiendo que le has puesto multiple al input para poder elegir varios a la vez. Ahora, si el usuario eligio 5 archivos y 1 tiene menos de 1200 px d ancho vas a hacerle elegirlos todos nuevamrnte? No seria mejor decirle q x archivo tiene menos de ... y no será cargado? Y tomar los que si estan bien para darle oportunidad a cargar otro? Commented el 17 may. 2022 a las 0:24

1 respuesta 1

0

El problema que tienes es que la funcion onload trabaja de manera asincrona y los ciclos for no, por lo tanto antes que se cargue la proxima imagen ya se repitio el ciclo completo.

De forma totalmente casual ayer estuve estudiando algo que jamas habia sentido siquiera nombrar de javascript, las funciones generadoras, que sirven para hacer que la funcion se dentenga ante la sentencia "yield", por lo tanto se pueden usar como iteradores asincronos.

Te pongo un ejemplo de lo que se puede hacer ante la carga de imagenes, si alguna de las 5 o menos que cargues con el input tiene un ancho menor a 1200 pixeles te saldra un alert() y si todas cumplen te sacara por consola el nombre de cada una de ellas.

Espero puedas darle uso.

files.addEventListener('change', (e) => {
   if(e.target.files.length > 5){
    alert("SOLO DE 1 a 5 IMAGENES")
    return
   }

   const images = e.target.files;

   function* verifica() {
    let i = 0;

    while (i < images.length) {
     img = new Image();
     img.src = URL.createObjectURL(images[i]);
     yield img.onload = function () {
      if (img.width < 1200) {
       alert("TODAS LAS IMAGENES DEBEN TENER MAS DE 1200 pixeles de ANCHO")
       i = images.length
       return
      } else {
       console.log(images[i].name);
       i++
       x.next()
      }
     }
    }

   }
   let x = verifica()
   x.next()
  })
<input type="file" id="files" multiple>

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.