HTML PHP Ajax Progress Bar

Today, We want to share with you HTML PHP Ajax Progress Bar.In this post we will show you Ajax File Upload with Progress Bar using PHP JQuery, hear for jQuery Progress Bar for PHP AJAX File Upload we will give you demo and example for implement.In this post, we will learn about PHP Ajax Progress bar taking data from MySQL table with an example.

HTML PHP Ajax Progress Bar

There are the Following The simple About HTML PHP Ajax Progress Bar Full Information With Example and source code.

Free Live Chat for Any Issue

As I will cover this Post with live Working example to develop video upload with progress bar in php, so the Show Progress Report in PHP Scripts for this example is following below.

Also Read This πŸ‘‰   remove page number latex - How to remove the number of the page in latex?

PHP functions a Long-running Process

long_process.php

<?php
    //simple long_process.php
    for($j=1;$j<=70;$j++){
        //do something
        echo 'Loading...';
        sleep(1);
    }
?>

PHP create Server-sent Events Within a Loop

<?php
header('Content-Type: text/event-stream');
// recommended to prevent caching of event data.
header('Cache-Control: no-cache'); 
  
function work_assign($id, $message, $progress) {
    $d = array('message' => $message , 'progress' => $progress);
      
    echo "id: $id" . PHP_EOL;
    echo "data: " . json_encode($d) . PHP_EOL;
    echo PHP_EOL;
      
    ob_flush();
    flush();
}
  
  
//PHP Process LONG RUNNING Work
for($i = 1; $i <= 10; $i++) {
    work_assign($i, 'on iteration ' . $i . ' of 10' , $i*10); 
 
    sleep(1);
}
  
work_assign('CLOSE', 'Process complete');

PHP Simple manage Work Progress from the Chrome Browser

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
		<title>PHP Ajax Progress bar taking data from MySQL table</title>
    </head>
    <body>
        <hr/>
        <input type="button" onclick="workStart();"  value="Start Long Work" />
        <input type="button" onclick="workStop();"  value="Stop Work" />
        <hr/>
        <hr/>
          
        <p>Results</p>
        <hr/>
        <div id="preview_area" style="border:1px solid #000; padding:10px; width:300px; height:250px; overflow:auto; background:#eee;"></div>
        <hr/>
          
        <progress id='progressor' value="0" max='100' style=""></progress>  
        <span id="percentage" style="text-align:right; display:block; margin-top:5px;">0</span>
    </body>
</html>

Listening for PHP Server Updates

var es;
  
function workStart() {
    es = new EventSource('sse_progress.php');
      
    //a message is received
    es.addEventListener('message', function(e) {
        var result = JSON.parse( e.data );
          
        addLog(result.message);       
          
        if(e.lastEventId == 'CLOSE') {
            addLog('Good Luck Received CLOSE closing');
            es.close();
            var live_progressBar = document.getElementById('progressor');
            live_progressBar.value = live_progressBar.max; //max out the progress bar
        }
        else {
            var live_progressBar = document.getElementById('progressor');
            live_progressBar.value = result.progress;
            var perc = document.getElementById('percentage');
            perc.innerHTML   = result.progress  + "%";
            perc.style.width = (Math.floor(live_progressBar.clientWidth * (result.progress/100)) + 15) + 'px';
        }
    });
      
    es.addEventListener('error', function(e) {
        addLog('sorry, Error occurred);
        es.close();
    });
}
  
function workStop() {
    es.close();
    addLog('sorry Dear....Interrupted');
}
  
function addLog(message) {
    var r = document.getElementById('preview_area');
    r.innerHTML += message + '<br>';
    r.scrollTop = r.scrollHeight;
}

Web Programming Tutorials Example with Demo

Read :

Also Read This πŸ‘‰   Ng-Options to Bind DropdownList using Angular Example

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about HTML PHP Ajax Progress Bar.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.