Вот так можно.
Есть файл loadable.php
, который делает доооолгий процесс:
<?
$from = 0;
$to = 10000;
$progress_update = 100;
header('Content-Length: '.ceil(($to - $from) / $progress_update), true, 200);
set_time_limit($to + 10);
for ($i = $from; $i < $to; $i++)
{
usleep(100);
if ($i % $progress_update == 0)
{
echo ' ';
ob_flush();
flush();
}
}
die(' ');
?>
И есть файл, который обращаясь за файлом loadable.php
, вызывает этот долгий процесс асинхронным запросом и показывает прогресс выполнения:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<progress id="progress" min="0" max="1" value="0"></progress>
<script>
var timer_progress;
var progress = $('#progress');
$.ajax ({
type: 'GET',
dataType: 'plain',
url: 'loadable.php' ,
beforeSend: function(thisXHR)
{
timer_progress = setInterval(function()
{
if (thisXHR.readyState > 2)
{
var totalBytes = thisXHR.getResponseHeader('Content-Length');
var dlBytes = thisXHR.responseText.length;
progress
.attr('max', totalBytes)
.attr('value', dlBytes);
}
}, 200);
},
complete: function()
{
clearInterval(timer_progress);
progress.attr('value', progress.attr('max'));
},
});
</script>
Первый файл в заголовке Content-Length
посылает точную продолжительность операции в байтах, а по мере выполнения операции подает на вывод 1 байт — пробел.
Второй файл пытается загрузить первый (вялотянущийся) файл, по мере «скачивания» отображая, сколько байт из указанных в Content-Length
загружено.