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.
bandera
en contexto global, quitavar
dentro de la función, porque con eso tendrías otra variable local:bandera = false;
onload
.