É possível vincular uma função ao evento progress de XMLHttpRequest
, nela é preciso verificar se é possível calcular o tamanho da resposta, que é recebido através do cabeçalho "Content-Length".
Para que o PHP possa enviar o conteúdo durante o processamento é preciso ligar flush implicito, desligar o buffer de saída e a compactação gzip. As configurações que coloquei no .htaccess
não podem ser alteradas com ini_set()
não podem ser alteradas com ini_set()
.
###HTML/JavaScript
<div id="progresso"></div>
<script>
var mensagem = document.getElementById('progresso');
var xhr = new XMLHttpRequest();
xhr.addEventListener('progress', function(e) {
if (e.lengthComputable) { // é possível calcular progresso
mensagem.textContent = parseInt(e.loaded / e.total * 100) + '% concluído';
} else { // remove evento para não repetir chamada
xhr.removeEventListener('progress', arguments.callee, false);
mensagem.textContent = 'não é possível calcular progresso';
}
}, false);
xhr.onreadystatechange = function(e) {
if (this.readyState !== 4) return;
if (this.status === 200) {
alert('requisição concluída');
} else {
mensagem.textContent = 'erro';
}
};
xhr.open('POST', 'progresso.php', true);
xhr.send();
</script>
###.htaccess
php_value implicit_flush On
php_value output_buffering Off
###progresso.php
<?php
// desligar compressão gzip
ini_set('zlib.output_compression', 'Off');
apache_setenv('no-gzip', 1); // apenas para Apache
// ativar flush implícito
ini_set('implicit_flush', 'On'); // ou ob_implicit_flush(1);
$length = 100; // etapas de processamento
header('Content-Length: ' . $length); // tamanho da resposta
for ($i = 0; $i <= $length; $i++) {
// aguardar 0.2 segundos - simulando execução de tarefa
usleep(200000);
// exibir 1 caractere por tarefa concluída
echo '.';
}