How to allow upload of images with maximum 5mb with this script?

Asked

Viewed 54 times

0

I understand almost nothing and want to help a friend. He has a script that resizes the image before doing the upload and saves the resized image with PHP. Turns out he’d like to put a cap on Mbs to the image preventing the user from sending gigantic images, overloading the server.

Follows below the script:

// Iniciando biblioteca
var resize = new window.resize();
resize.init();

// Declarando variáveis
var imagens;
var imagem_atual;

// Quando carregado a página
$(function ($) {
    // Quando selecionado as imagens
    $('#imagem').on('change', function () {
        enviar();
    });
});

/*
 Envia os arquivos selecionados
 */
function enviar(){

    // Verificando se o navegador tem suporte aos recursos para redimensionamento
    if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
        alert('O navegador não suporta os recursos utilizados pelo aplicativo');
        return;
    }

    // Alocando imagens selecionadas
    imagens = $('#imagem')[0].files;

    // Se selecionado pelo menos uma imagem
    if (imagens.length > 0){

        // Definindo progresso de carregamento
        $('#progresso').attr('aria-valuenow', 0).css('width', '35%').html('Carregando..');
            // Escondendo campo de imagem
        $('#imagem').hide();
        // Iniciando redimensionamento
        imagem_atual = 0;
        redimensionar();
    }
}

    /*
     Redimensiona uma imagem e passa para a próxima recursivamente
     */
    function redimensionar(){

        // Se redimensionado todas as imagens
        if (imagem_atual > imagens.length){

            // Definindo progresso de finalizado
            $('#progresso').html('Imagem enviada com sucesso');

            // Limpando imagens
            limpar();

            // Exibindo campo de imagem
            $('#imagem').show();

            // Finalizando
            return;
        }

        // Se não for um arquivo válido
        if ((typeof imagens[imagem_atual] !== 'object') || (imagens[imagem_atual] == null)){
            // Passa para a próxima imagem
            imagem_atual++;
            redimensionar();
            return;
        }

        // Redimensionando
        resize.photo(imagens[imagem_atual], 800, 'dataURL', function (imagem) {

            // Salvando imagem no servidor
            $.post('ajax/salvar.php', {imagem: imagem}, function() {

                // Definindo porcentagem
                var porcentagem = (imagem_atual + 1) / imagens.length * 100;

                // Atualizando barra de progresso
                $('#progresso').text(Math.round(porcentagem) + '%').attr('aria-valuenow', porcentagem).css('width', porcentagem + '%');

                // Aplica delay de 1 segundo
                // Apenas para evitar sobrecarga de requisições
                // e ficar visualmente melhor o progresso
                setTimeout(function () {
                    // Passa para a próxima imagem
                    imagem_atual++;
                    redimensionar();
                }, 100);

            });

        });
    }

How do I limit the size of the image that will be loaded to a maximum of 5MB? You can create something that checks the image size before doing the upload and before you start resizing it and saving via php?

  • 2

    It is better to do this validation with php, on the server side

  • All your code is javascript, forget it, you can’t trust any javascript. The user can even turn it off or can send the file outside a browser, ignoring any javascript validation. Want to limit? Use upload_max_filesize, is not enough? Use client_max_body_size in NGINX (or equivalent in other webservers), not only to depend on PHP. If you have already done this and you just want to show a warning (saying that you exceed the limit, for example) in javascript the question is different, so you do not want to prevent them from overloading, the objectives are other.

  • Yes, my goal is just to do a check and show a warning . As to prevent from the server side.. is a great idea tbm. but I would like to do this small function of checking the file size and make an alert

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.