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 eventoimg.onload = function (e) {
- Sin embargo, más adelante intentas acceder a
- 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.