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)
}
}
break
y poniendox = imagen.length
para que pare los ciclos