ajax upload progress,javascript - PHP Ajax Upload Progress Bar - Stack Overflow

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

rel="stylesheet" type="text/css" />

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();

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