El problema no era tan complicado:La función onload de la imagen es asíncrona, el resto de código continúa ejecutándose y la variable $bandera
se actualiza hasta que la imagen se cargó.
- Declara la variable, nuevamente, dentro de la función
- En esta línea
img.onload = function () {
no tienes una variable específica para el evento- Sin embargo, más adelante intentas acceder a
e.target
- Podrías cambiar por
event.target
, o bien, asignar variable al eventoimg.onload = function (e) {
- Sin embargo, más adelante intentas acceder a
- La imagen no aparece porque debes usar src en lugar de result para mostrarla
Una opción es "crear una pausa" para dar tiempo a que se cargue la imagen y poder saber si la variable cambió. En teoría, no es la mejor opción, porque podría haber algún proceso en el navegador que demore la carga de imágenes y, por tanto, el tiempo de pausa no sea suficiente.
var arrayArchivos = [];
$(document).ready(function(){
$(':file').change(function(){
filePreview(this);
});
});
function filePreview(input)
{
$.each(input.files, function(index, elem){
var bandera = false;
if(elem.type == "image/jpeg" || elem.type == "image/png")
{
var img = new Image();
img.onload = function (e) {
if(this.width.toFixed(0) >= 600 && this.height.toFixed(0) >= 600)
{
var imagen = $("<div class='content-prev'><i class='glyphicon glyphicon-remove i-img' onClick='eliminarArchivo(this);'></i>"
+ "<img src='" + e.target.src + "' style='width: 200px; height: 200px;'></div>");
$("#previewImagenes").append(imagen);
}
else
{
alert('Tamaño(s) de imagen no admitido(s)', 'Minimo de ancho admitido: 600px<br>Minimo de alto admitido: 600px', 'error');
bandera = true;
}
}
img.src = URL.createObjectURL(elem);
}
else
{
Swal.fire('Formato incorrecto de imagen', 'Formatos admitidos: jpg y png', 'error');
bandera = true;
}
// Esperar para analizar el resultado
setTimeout(function() {
if(bandera == true)
{
alert("entro al if");
return false;}
}
arrayArchivos.push(elem);
}, arrayArchivos.push(elem300);
});
}
function eliminarArchivo(elem)
{
var index = $(elem).parent().index();
arrayArchivos.splice(index, 1);
$(elem).parent().remove();
}
.i-img{
position: absolute;
top: 7;
right: 0;
z-index: 3;
cursor: pointer;
}
.content-prev{
display: inline-block;
margin-right: 5px;
position: relative;
vertical-align: middle;
}
<link href="https://unpkg.com/[email protected]/dist/sweetalert2.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/sweetalert2.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<form>
<input type="file" id="archivos" name="archivos[]" multiple>
<div class="previewImagenes" id="previewImagenes"></div>
</form>
Resumen: Tratar de acceder al evento con un parámetro incorrecto generaba error y no se ejecutaba el resto de código.