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.

List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.

Snippet Contents

HTML PHP Ajax Progress Bar

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.


Related FAQ

Here are some more FAQ related to this Article:

  1.   Reactjs Form Validation Example with Demo
  2.   Real time progress bar With PHP
  3.   How to Get Absolute Directory Path in PHP Script
  4.   How to get the browser viewport height and width dimensions?
  5.   PHP Laravel 6 Session-Based Flash Message Example
  6.   jQuery delay Effects with Animation Example
  7.   Highcharts Tooltip Customize Data from array
  8.   Laravel 6 SubQuery MySQL Tutorial with Examples
  9.   Angularjs Form Validation Example Tutorial From Scratch
  10.   Angular js Introduction to Looping Statements

Leave a Reply

Your email address will not be published. Required fields are marked *