30

Estou trabalhando com PHP, mas imagino que isso possa ser feito só com javascript/jQuery. Quando faço um upload o navegador mostra na barra de status a porcentagem. Eu gostaria de pegar esse valor e criar a partir dele uma barra de progresso personalizada.

A barra eu sei fazer. Só não sei como pegar o valor atual da porcentagem. Como obtê-lo?

3 Respostas 3

22

No HTML5 é possível fazer isso adicionando um ouvinte progress à propriedade upload de um XMLHttpRequest (usado para fazer upload do arquivo via Ajax):

xhr.upload.addEventListener("progress", function(e) {
    var pc = parseInt(100 - (e.loaded / e.total * 100));
    // Atualizar sua barra de progresso usando "pc"
}, false);

Fonte (e exemplo completo) em inglês: How to Create Graphical File Upload Progress Bars in HTML5 and JavaScript. Essa funcionalidade, ao que parece, é suportada por todos os browsers populares, na sua versão mais atual somente (ou seja, não funciona em versões mais antigas porém ainda muito utilizadas, como IE9 ou anterior).

4
  • 1
    Só um esclarecimento, esta é uma função disponível no XMLHttpRequest Level 2.
    – bfavaretto
    Commented 19/12/2013 às 16:23
  • 1
    A sua resposta deu certo pra mim, mas ontem passei o dia inteiro procurando e, em lugar algum, havia visto que o evento é para ser aplicado na propriedade "upload" do xhr. Até mesmo no MDN está documentado que o evento de progresso deve ser no próprio xhr. Ver na MDN Commented 3/09/2014 às 0:47
  • 1
    @GiovanneAfonso Ambas as formas estão corretas. O atributo upload é um XMLHttpRequestUpload que implementa EventTarget que possui o método addEventListener. O próprio XMLHttpRequest também implementa EventTarget, provavelmente delegando a atribuição do ouvinte ao seu atributo upload.
    – mgibsonbr
    Commented 3/09/2014 às 1:07
  • 1
    No meu caso, quando eu vinculava o evento diretamente ao xhr, ele era chamado UMA vez após o término do upload com event.loaded = [um número] e event.total = 0. Mudando para o xhr.upload funcionou, o script está bem simples, talvez seja alguma configuração no servidor, mas seja como for, estou feliz que agora está funcionando. Commented 3/09/2014 às 1:20
12

Usando o plugin de jquery ajaxform da para fazer dessa forma:

 $('form').ajaxForm({
        beforeSend: function() {
            status.empty();
            var percentVal = '0%';
            bar.width(percentVal);
            percent.html(percentVal);
        },
        uploadProgress: function(event, position, total, percentComplete) {
            var percentVal = percentComplete + '%';
            bar.width(percentVal);
            percent.html(percentVal);
        },
        complete: function(xhr) {
            status.html(xhr.responseText);
        }
    });

Baixar o plugin aqui http://jquery.malsup.com/form/#getting-started

Sem o plugin é meio complicado recomendo fortemente baixa-lo pois é muito útil para submeter forms via ajax entre outras coisas.

7

Como já mencionado, existem bibliotecas javascript que fazem o trabalho difícil para você. Em geral não vale a pena entrar em detalhes de baixo nível, pois provavelmente diferentes versões de diferentes navegadores serão usados você terá que lidar com inúmeros problemas de compatibilidade.

Bibliotecas Javascript

Eu recomendo o uso do plugin jQuery File Upload. Já usei em alguns projetos, inclusive suportando múltiplos uploads simultâneos mostrando os resultados em uma tabela. Veja o demo aqui.

Outra alternativa, principalmente para suportar navegadores mais antigos, é o uploadify. Ele possui um fallback usando Flash, então quando o navegador não suportar os recursos avançados de upload, ele usará esta alternativa automaticamente.

Implementação que depende do PHP

Por outro lado, se esta funcionalidade é importante para sua aplicação e ela vai receber uploads grandes, você pode usar a funcionalidade recente Session Upload Progress do PHP, disponível a partir da versão 5.4.

O Session Upload Progress não afeta a requisição com o upload, mas permite a você monitorar o upload através de uma variável colocada na sessão. Então você poderia fazer um Ajax a partir da página para recuperar a porcentagem do upload, passando o nome do campo por parâmetro. Veja o exemplo:

<?php
//nome do elemento da sessão contendo um array de informações de upload
$key = ini_get("session.upload_progress.prefix") .
        $_POST[ini_get("session.upload_progress.name")];

//recuperao vetor com informações de upload
$uploads_array = $_SESSION[$key];

//exibe as informações de um upload em específico
var_dump($uploads_array[$_POST["myField"]]);
?>

Para ativar a funcionalidade, habilite o parâmetro session.upload_progress.enabled no php.ini.

Veja a documentação para maiores detalhes.

1
  • 1
    +1 por mencionar o jQuery File Upload do blueimp, já trabalhei com o plugin e é muito bacana. Commented 13/03/2014 às 22:31

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .