Skip to main content
1 de 2
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.

Triby
  • 25.2k
  • 3
  • 18
  • 36