Skip to main content
corrigida informação de configuração
Fonte Link
Pedro Sanção
  • 5,7mil
  • 17
  • 41

É 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 '.';
}

É 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().


###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

$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 '.';
}

É 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().


###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 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 '.';
}
Fonte Link
Pedro Sanção
  • 5,7mil
  • 17
  • 41

É 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().


###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

$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 '.';
}