Introduction

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 session.upload_progress.name 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 session.upload_progress.name 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

a.html

<link href=http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css

rel=stylesheet type=text/css />

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js></script>

<script src=http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js></script>

<script type=text/javascript>

    var intval = null;

    var percentage = 0 ;

    function startMonitor() {

        $.getJSON('b.php',

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

                $('#progress-txt').html('Complete');

                stopInterval();

            }

        });

    }



    function startInterval() {

        if (intval == null) {

            intval = window.setInterval(function () {startMonitor()}, 200)

        } else {

            stopInterval()

        }

    }



    function stopInterval() {

        if (intval != null) {

            window.clearInterval(intval)

            intval = null;

            $(#progressbar).hide();

            $('#progress-txt').html('Complete');

        }

    }



    startInterval();

</script>

b.php

session_start();

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

JavaScript

$('#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 session.upload_progress.name value:

        var progressObj = {

            name: 'PHP_SESSION_UPLOAD_PROGRESS',

            value: (new Date()).getTime()  // pseudo unique ID

        };

        data.formData.push(progressObj);

        // Start the progress polling:

        data.context.data('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) {

    clearInterval(data.context.data('interval'));

});

progress.php

$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

• Tracking Upload Progress with PHP and JavaScript


• PHP-5.4-Upload-Progress-Example