0

var arrayArchivos = [];
var bandera = false;

$(document).ready(function(){
    $(':file').change(function(){
        filePreview(this);
    });
});

function filePreview(input) 
{
    $.each(input.files, function(index, elem){
        if(elem.type == "image/jpeg" || elem.type == "image/png")
        {
          var img = new Image();
        
          img.onload = function () {
                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.result + "' 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>

Tengo esa función para trabajar la pre visualización de las imágenes y tengo dos problemas que no se como resolverlos, ojala que pudieran orientarme:

El primer problema viene en el momento de comparar el tamaño de la imagen cargada ya que siempre marca que el ancho y alto son 0.

El segundo problema esta en que tengo una variable bandera inicializada en false, dentro de la función onload están las condicionales que permiten determinar si la imagen cargada es del formato pedido y si las medidas están dentro de lo establecido, si cualquiera de las dos condiciones no se cumplen seteo la variable bandera a true pero el problema es que fuera de la función onload la variable bandera sigue con el valor de false.

9
  • 1
    ¿Responde esto a tu pregunta? Validar tamaño(alto y ancho) de imagen Javascript
    – Triby
    Commented el 17 ago. 2020 a las 19:18
  • Funciona para el tamaño pero sigue sin cambiar el valor de la variable bandera fuera de la función onload Commented el 17 ago. 2020 a las 19:44
  • Si ya declaraste bandera en contexto global, quita var dentro de la función, porque con eso tendrías otra variable local: bandera = false;
    – Triby
    Commented el 17 ago. 2020 a las 19:52
  • Sigue sin cambiar el valor Commented el 17 ago. 2020 a las 19:55
  • Por favor edita la pregunta para agregar el código donde defines la variable y donde tratas de acceder. O bien, defínela antes del onload.
    – Triby
    Commented el 17 ago. 2020 a las 20:00

1 respuesta 1

0

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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.