Skip to main content
Publicación recuperada por Triby
Agregar setTimeout para dar tiempo a que se cargue la imagen
Origen Enlace
Triby
  • 25.2k
  • 3
  • 18
  • 36

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 evento img.onload = function (e) {
  • 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.

El problema no era tan complicado:

  • 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 evento img.onload = function (e) {
  • La imagen no aparece porque debes usar src en lugar de result para mostrarla
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;
        }

        
    if(bandera == true)
        {
            alert("entro al if");
            return false;
        }
     
       arrayArchivos.push(elem); 
    });
}

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.

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>
Publicación eliminada por Triby
Origen Enlace
Triby
  • 25.2k
  • 3
  • 18
  • 36

El problema no era tan complicado:

  • 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 evento img.onload = function (e) {
  • La imagen no aparece porque debes usar src en lugar de result para mostrarla

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;
        }

        
    if(bandera == true)
        {
            alert("entro al if");
            return false;
        }
     
      arrayArchivos.push(elem); 
    });
}

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.