Skip to main content
2 de 2
Agregar setTimeout para dar tiempo a que se cargue la imagen
Triby
  • 25.2k
  • 3
  • 18
  • 36

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ó.

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");
          }
          arrayArchivos.push(elem);
        }, 300);
    });
}

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>

Triby
  • 25.2k
  • 3
  • 18
  • 36