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
Contents
There are the Following The simple About HTML PHP Ajax Progress Bar Full Information With Example and source code.
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.
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 :
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.
I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I’m a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.