File Upload Progress Bar with Jquery and PHP.

We received many tutorial requests from 9lessons readers that asked how to create file upload progress bar with PHP and Jquery. In this post Arun Kumar Sekar had developed few lines of code using PHP APC library, it is very simple getting the server file upload process every few second and increasing the bar color using jquery css property. Just take a look at this demo.

Live Demo

To run this script you have to install PHP apc library extension or for PHP 5.4 not required, just follow the steps to enable the extension. For web page design we implemented with bootstrap CSS library for any information check my previous post Bootstrap Tutorial

Windows APC Installation
Follow this link Click Here
In php.ini include apc.rfc1867 = on 

Linuk APC Installation
Follow this Link Click Here
In php.ini include apc.rfc1867 = on 
php.ini located in /etc/php.ini

get_progress.php
Contains PHP code it identifies file upload status from server process. 

<?php
session_start();
error_reporting(0);
/*
// For PHP 5.4 users
$progress_key =ini_get("session.upload_progress.prefix")."uploadImage"; // uploadImage is a Form name
$current = $_SESSION[$progress_key]["bytes_processed"];
$total = $_SESSION[$progress_key]["content_length"];
echo $current < $total ? ceil($current / $total * 100) : 100;
*/
// For PHP 5.2+ php_apc.dll or php_apc.so holder
if(isset($_GET['progress_key']) and !empty($_GET['progress_key'])){
$status = apc_fetch('upload_'.$_GET['progress_key']); 
    echo $status['current']/$status['total']*100;
exit;
}
?>

index.php
General form file upload with PHP. You have to include validation rules, please check my previous post for help. 

<?php
$uiq = uniqid();
$image_folder = "uploads/";
$uploaded = false;

if(isset($_POST['upload_image'])){
if($_FILES['userImage']['error'] == 0 ){
$up = move_uploaded_file($_FILES['userImage']['tmp_name'], $image_folder.$_FILES['userImage']['name']);
if($up){
$uploaded = true;  
}
}
}
?>
<form name="uploadImage" id="uploadImage" enctype="multipart/form-data" action="index.php?progress=<?php echo($uiq)?>" method="post" class="well">
<label>Upload File</label>
<input type="file" name="userImage" id="userImage" /> 
<span class="badge badge-info" style="display:none;">0%</span> 
<input type="submit" class="btn btn-success" name="upload_image" id="upload_image" value="UPLOAD FILE" /> 
<div class="progress" style="display:none;"><div class="bar" style="width:0%;"></div></div>
</form>

JavaScript File
Contains simple javascript implemented with Jquery properties getting server file process every few seconds. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script type="application/javascript">
$(document).ready(function(){
var randIDS = '<?php echo $uiq?>';
// Add Hidden Field
var hidden = $("<input>");
hidden.attr({
name:"APC_UPLOAD_PROGRESS",
id:"progress_key",
type:"hidden",
value:randIDS
});
$("#uploadImage").prepend(hidden);
$("#uploadImage").submit(function(e){

var p = $(this);
p.attr('target','tmpForm');
 
// creating iframe
if($("#tmpForm").length == 0){
var frame = $("<iframe>");
frame.attr({
name:'tmpForm',
id:'tmpForm',
action:'about:blank',
border:0
}).css('display','none');
p.after(frame);
} 
// Start file upload
$.get("get_progress.php", {progress_key:randIDS, rand:Math.random()},
function(data){ 
var uploaded = parseInt(data);
if(uploaded == 100){
$(".progress, .badge").hide();
clearInterval(loadLoader);
}
else if(uploaded < 100)
{
$(".progress, .badge").show();
$(".badge").text(uploaded+"%");
var cWidth = $(".bar").css('width', uploaded+"%");          
}
if(uploaded < 100)
var loader = setInterval(loadLoader,2000);
});
 
var loadLoader = function(){
$.get("get_progress.php", {progress_key:randIDS, rand:Math.random()}, function(data)
{
var uploaded = parseInt(data);
if(uploaded == 100){
$(".progress, .badge").hide();
parent.location.href="index.php?success";
}
else if(uploaded < 100)
{
$(".progress, .badge").show();
$(".badge").text(uploaded+"%");
var cWidth = $(".bar").css('width', uploaded+"%");          
}
});
}
});});
</script>