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')
}
})