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.
Download Script 
Live DemoDeveloper
Arun Kumar Sekar
Engineer
Chennai, INDIA
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 TutorialWindows APC InstallationFollow this link Click HereIn php.ini include apc.rfc1867 = on Linuk APC InstallationFollow this Link Click HereIn php.ini include apc.rfc1867 = on php.ini located in /etc/php.iniget_progress.phpContains 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.phpGeneral 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 FileContains 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>
1.00 per day for unlimited usage.
