PHP Ajax Upload Progress Bar

<form enctype="multipart/form-data" action="upload.php" method="POST">
<input name="uploaded" type="file" />
<input type="submit" value="Upload" />

   $target = "data/".basename( $_FILES['uploaded']['name']) ;
   move_uploaded_file($_FILES['uploaded']['tmp_name'], $target);

I know Javascript, AJAX and JQuery etc very well and I believe an upload progress bar can be created using PHP, AJAX and Javascript etc.

I am surprised how to get the size of upload (meaning each second I want to know, how much of the file is uploaded and how much is remaining, I think it should be possible using AJAX etc) file during upload is in process.

Here is link to the PHP manual but I didn’t understand that:

Is there any other method to show the upload progress bar using PHP and AJAX but without use of any external extension of PHP? I don’t have access to php.ini


The PHP Doc is very detailed it says

The upload progress will be available in the $_SESSION superglobal when an upload is in progress, and when POSTing a variable of the same name as the INI setting is set to. When PHP detects such POST requests, it will populate an array in the $_SESSION, where the index is a concatenated value of the session.upload_progress.prefix and INI options. The key is typically retrieved by reading these INI settings, i.e.

All the information you require is all ready in the PHP session naming

  • start_time
  • content_length
  • bytes_processed
  • File Information ( Supports Multiple )

All you need is to extract this information and display it in your HTML form.

Basic Example


<link href=""
rel="stylesheet" type="text/css" />
<script src=""></script>
<script src=""></script>
<script type="text/javascript">
    var intval = null;
    var percentage = 0 ;
    function startMonitor() {
        function (data) {
            if (data) {
                percentage = Math.round((data.bytes_processed / data.content_length) * 100);
                $("#progressbar").progressbar({value: percentage});
                $('#progress-txt').html('Uploading ' + percentage + '%');

            if(!data || percentage == 100){

    function startInterval() {
        if (intval == null) {
            intval = window.setInterval(function () {startMonitor()}, 200)
        } else {

    function stopInterval() {
        if (intval != null) {
            intval = null;



header('Content-type: application/json');
echo json_encode($_SESSION["upload_progress_upload"]);

Example with PHP Session Upload Progress

Here is a better optimized version from PHP Session Upload Progress

Read More:   How to perform string interpolation in TypeScript?


$('#fileupload').bind('fileuploadsend', function (e, data) {
    // This feature is only useful for browsers which rely on the iframe transport:
    if (data.dataType.substr(0, 6) === 'iframe') {
        // Set PHP's value:
        var progressObj = {
            name: 'PHP_SESSION_UPLOAD_PROGRESS',
            value: (new Date()).getTime()  // pseudo unique ID
        // Start the progress polling:'interval', setInterval(function () {
            $.get('progress.php', $.param([progressObj]), function (result) {
                // Trigger a fileupload progress event,
                // using the result as progress data:
                e = document.createEvent('Event');
                e.initEvent('progress', false, true);
                $.extend(e, result);
                $('#fileupload').data('fileupload')._onProgress(e, data);
            }, 'json');
        }, 1000)); // poll every second
}).bind('fileuploadalways', function (e, data) {


$s = $_SESSION['upload_progress_'.intval($_GET['PHP_SESSION_UPLOAD_PROGRESS'])];
$progress = array(
        'lengthComputable' => true,
        'loaded' => $s['bytes_processed'],
        'total' => $s['content_length']
echo json_encode($progress);

Other Examples

This is my code its working fine Try it :

Demo URL (broken link)

Try this below code:


<!doctype html>
<title>File Upload Progress Demo #1</title>
body { padding: 30px }
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }

.progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
.bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
.percent { position:absolute; display:inline-block; top:3px; left:48%; }
    <h1>File Upload Progress Demo #1</h1>
    <code>&lt;input type="file" name="myfile"></code>
        <form action="upload.php" method="post" enctype="multipart/form-data">
        <input type="file" name="uploadedfile"><br>
        <input type="submit" value="Upload File to Server">

    <div class="progress">
        <div class="bar"></div >
        <div class="percent">0%</div >

    <div id="status"></div>

<script src=""></script>
<script src=""></script>
(function() {

var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');

    beforeSend: function() {
        var percentVal="0%";
    uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
    complete: function(xhr) {



upload.php :

$target_path = "uploads/";

$target_path = $target_path . basename( $_FILES['uploadedfile']['name']); 

if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)) {
    echo "The file ".  basename( $_FILES['uploadedfile']['name']). 
    " has been uploaded";
} else{
    echo "There was an error uploading the file, please try again!";

May I suggest you FileDrop.

Read More:   Finding date by subtracting X number of days from a particular date in Javascript

I used it to make a progess bar, and it’s pretty easy.

The only downside I met, is some problems working with large amounts of data, because it dosen’t seem to clear up old files — can be fixed manually.

Not written as JQuery, but it’s pretty nice anyway, and the author answers questions pretty fast.

While it may be good fun to write the code for a progress bar, why not choose an existing implementation. Andrew Valums wrote an excellent one and you can find it here:

I use it in all my projects and it works like a charm.

First of all, make sure you have PHP 5.4 installed on your machine. You didn’t tag so I don’t know. Check by calling echo phpversion(); (or php -v from the command line).

Anyway, assuming you have the correct version, you must be able to set the correct values in the php.ini file. Since you say you can’t do that, it’s not worth me launching into an explanation on how to do it.

As a fallback solution, use a Flash object uploader.


var xhr = new XMLHttpRequest();'GET', 'video.avi', true);

xhr.onload = function(e) {
  if (this.status == 200) {
    var blob = this.response;
    var img = document.createElement('img');
    img.onload = function(e) {
      window.URL.revokeObjectURL(img.src); // Clean up after yourself.
    img.src = window.URL.createObjectURL(blob);
xhr.addEventListener("progress", updateProgress, false);

function updateProgress (oEvent) {
  if (oEvent.lengthComputable) {
    var percentComplete = oEvent.loaded /;
  } else {
    // Unable to compute progress information since the total size is unknown

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Similar Posts