I have a script that should process a certain file, with a size of, say, 100,000 lines. Everything is as it should be, it is located in an array and operates with the help of a loop.

while($i < count($file)) { ... $i++; }

But I ran into a problem. How do I display the percentage of the passage of the file script? I sketched code that displays the percentage of loading in sequence, but I need it to be displayed using js in the style line of the <div> element

  • As I understand it, you need to transfer processing from the server to the client? - RubaXa
  • Yeah, right. - Victor Yevlampyev

2 answers 2

 $count = count($file); while($i < $count) { if(i%10 == 0) { echo $i*100/$count . ' процентов<br />'; ob_flush(); flush(); } $i++; }
  • This is a linear output. I have exactly the same now - Victor Evlampiev
  • one
    Um, do not quite understand what else you need. Or you can not process data using JavaScript? Well, it's no more complicated than my post: <script> function getPersent (val) {document.getElementById ('val'). InnerHTML = val + '%'; } </ script> And in the loop change: echo "getPersent ('". $ i * 100 / $ count. "')"; - lampa
  • clip2net.com/clip/m110674/thumb640/1370501883-clip-5kb.png As a result, this is a miracle. And it is required that a new line be displayed in place of the old one. - Victor Evlampiev
  • @SnikersSurgut, you probably add a new element with the next value, but you need to change the current value in a certain element, which in general showed you @lampa - .innerHTML - Deonis

Here it is possible.

There is a file loadable.php , which does the same process:

 <? $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(' '); ?>

And there is a file that, when accessing the file loadable.php , calls this long process by an asynchronous request and shows the progress of the execution:

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

The first file in the Content-Length header sends the exact duration of the operation in bytes, and as the operation proceeds, it sends a space to the output of 1 byte.

The second file tries to load the first (sluggish) file, as it “downloads”, displaying how many bytes from those specified in the Content-Length loaded.