0

Amigos como estan? Los molesto para solicitarles ayuda, tengo armado un script para hacer upload de imagenes, actualmente valido el peso del archivo pero necesitaría sumarle que se pueda limitar por medida de la imagen también ¿Como puedo agregarselo a este script?

$(document).ready(function() { $('#fotoPublicidad').change(function () {

    if(this.files[0].size > 270000) { 
            $(this).val('');
            $('#errorupportada').fadeIn("fast").html("El archivo supera el límite de peso permitido. 270kb.");
                alert("El archivo supera el límite de peso permitido. 270kb. Reintente con otro archivo.");
        }else {
            $('#errorupportada').fadeOut("fast");
        var val = $(this).val();
        switch(val.substring(val.lastIndexOf('.') + 1).toLowerCase()){
            case 'jpg': case 'jpeg': case 'png': case 'gif':
                $("#fotoPublicidad").css("background", "white");
        
        var data = new FormData();
        var files = $('#fotoPublicidad')[0].files[0];
        data.append('file',files);
            
            data.append('user', 'Redacción');
            data.append('file',files);
            data.append('path', $('input[name=postId]').val() );
            $.ajax({
                url:'upload-publi.php',
                type:'POST',
                contentType:false,
                data:data,
                processData:false,
                cache:false,
                beforeSend: function () {
                    $("#resultado-fotoPublicidad").stop().fadeIn("fast").html("<p class='ok'>Procesando, espere por favor...</p>");
                    $("#fotoPublicidad").fadeOut("fast");
                    $("#send").fadeOut("fast");
                    $("#publ").fadeOut("fast");
                    $(".public").fadeOut("fast");
                    $("#phportadainput").attr('value', '');
                    $("#phportadainput-error").html('');
                }
            }).done(function(msg){
                $("#resultado-fotoPublicidad").fadeOut("fast");
                $("#upload-fotos-reciencargadasPublicidad").append(msg);
                $("#fotoPublicidad").fadeIn("fast");
                $("#send").stop().fadeIn("fast");
                $("#phportadainput").attr('value','Foto cargada');
                $(".fancybox").fancybox();
            });
        default:
                $("#fotoPublicidad").val('').css( "background", "#fff" );
            break;
        }
        
}
    });
});

Muchas gracias por la ayuda! Saludos


Estimado muchas gracias, he probado de varias formas sin éxito en el código, no hace el upload de la imagen. Este sería el código.

$(function() {
    $('#fotoBanner').on('change', function() {
        let file = this.files[0];
        if(file && this.files[0].type.indexOf("image") != -1) {
            let size = this.files[0].size;
            // Crear imagen
            let img = new Image();
            // Crear URL del archivo seleccionado
            let objectUrl = URL.createObjectURL(file);
            // Ejecutar cuando la imagen se cargue
            img.onload = function () {
                console.log(this.width + " " + this.height);
                // Compara peso (tamaño), alto y ancho
                if(size <= 2700000 && this.width == 967 && this.height == 101) {
                    $('#errorupportada').fadeOut("fast");
                            var val = $(this).val();
                            switch(val.substring(val.lastIndexOf('.') + 1).toLowerCase()){
                                case 'jpg': case 'jpeg': case 'png': case 'gif':
                                    $("#fotoBanner").css("background", "white");
                            
                            var data = new FormData();
                            var files = $('#fotoBanner')[0].files[0];
                            data.append('file',files);
                                
                                data.append('user', '<?php echo "$_SESSION[SESS_FIRST_NAME]"; ?>');
                                data.append('file',files);
                                data.append('path', $('input[name=postId]').val() );
                                $.ajax({
                                    url:'upload-banner.php',
                                    type:'POST',
                                    contentType:false,
                                    data:data,
                                    processData:false,
                                    cache:false,
                                    beforeSend: function () {
                                        $("#resultado-fotoBanner").stop().fadeIn("fast").html("<p class='ok'>Procesando, espere por favor...</p>");
                                        $("#fotoBanner").fadeOut("fast");
                                        $("#send").fadeOut("fast");
                                        $("#bann").fadeOut("fast");
                                        $(".banne").fadeOut("fast");
                                        $("#phportadainput").attr('value', '');
                                        $("#phportadainput-error").html('');
                                    }
                                }).done(function(msg){
                                    $("#resultado-fotoBanner").fadeOut("fast");
                                    $("#upload-fotos-reciencargadasBanner").append(msg);
                                    $("#fotoBanner").fadeIn("fast");
                                    $("#send").stop().fadeIn("fast");
                                    $("#phportadainput").attr('value','Foto cargada');
                                    $(".fancybox").fancybox();
                                });
                            default:
                                    $("#fotoBanner").val('').css( "background", "#fff" );
                                break;
                            }
                }
            };
            // Asignar URL a la imagen
            img.src = objectUrl;
        } else {
            alert('Error en archivo o no es una imágen válida.');
        }
    });
});

¿Dónde se encuentra el error? Muchas gracias!

1 respuesta 1

0

Necesitas crear un objeto de imagen para poder analizar y, solo entonces, comenzar la subida:

$(function() {
    $('#files').on('change', function() {
        let file = this.files[0];
        if(file && this.files[0].type.indexOf("image") != -1) {
            let size = this.files[0].size;
            // Crear imagen
            let img = new Image();
            // Crear URL del archivo seleccionado
            let objectUrl = URL.createObjectURL(file);
            // Ejecutar cuando la imagen se cargue
            img.onload = function () {
                console.log(this.width + " " + this.height);
                // Compara peso (tamaño), alto y ancho
                if(size <= 2700000 && this.width <= 500 && this.height <= 500) {
                    // Ejecuta AJAX para subir imagen
                }
            };
            // Asignar URL a la imagen
            img.src = objectUrl;
        } else {
            alert('Error en archivo o no es una imágen válida.');
        }
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post">
    <input type="file" id="files" name="files"><br>
</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.