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
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;
}
?>
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>
$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>
<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>
nice one.. great tutorial
ReplyDeleteAny chance to update you newsletter database so we can download this fantastic script?
ReplyDeleteThanks in adv
Good tutorial. Thanks
ReplyDeletedoes it works with more then one file?
ReplyDeleteGreat work Arun..
ReplyDeletewhat about multiple upload when you browse you can select multiple picture and upload like facebook or gplus
ReplyDeleteOMG, Linuk? :) Maybe, Linux?
ReplyDeleteThanks... It is so important for web2.0
ReplyDeleteI got some problem with installing lib to debian... did anyone solve that? :) thanks
ReplyDeletefantastic
ReplyDeleteFirst time it worked in the Live Demo, now it writes thast successfully uploaded, but no progess visible.
ReplyDeleteSubscribed in the morning and still not able to download the scripts???
ReplyDeleteI think you should rethink of your subscription policy!!!!!!!!!
Thanks
Perfect it's what I was searching
ReplyDeleteThanks
nice tut!
ReplyDeletevery nice tut:)
ReplyDeleteExcelente aporte.
ReplyDeleteEstarÃa buenÃsimo que fuera multiarchivo y arrastro y suelto. Abrazo.
hi, what about linux? the dl has the dll file. ty
ReplyDeleteThats a great one!! was allover the internet looking for such a script thanks!!
ReplyDeletethis, very helping me..thanks'
ReplyDeleteWhat PHP Framework do you usually use @ Srinivas?
ReplyDeleteGood work Arun thanks alot i really need it on my project ..keep it up.
ReplyDeleteRegards
Salman Ahmad
not working in ie 8..
ReplyDeleteit's not work....not show progress...just 0 % and success upload...
ReplyDeleteNice Tutorial. Thanks. Going to use in my future projects.
ReplyDeleteThank you very much for your good tutorial!
ReplyDeleteYou´re the guy ! Thanks a lot
ReplyDeleteI want multiple uploads.
ReplyDeleteHow to achieve that?
nice upload work yar... but i need this with multiple file upload option , can u plz post r make change it in ....
ReplyDeletefriend i am unable to run it my php version is 5.3.8 what should i do?
ReplyDeleteExcellent contribution.
ReplyDeleteIt would be cool if multifile and dragged out and loose. Embrace.
nice
ReplyDeleteProblemas con la barra no carga, problemas con la instalación de APC
ReplyDeleteRealy Nice Work
ReplyDeleteThx A Lot :)
Really Nice Script Dude
ReplyDeletegood job
ReplyDeleteHow do i check file upload size?
ReplyDeleteFor those of you saying it goes from 0% to successful, upload a larger image. Small images takes to fast to upload for the script to update the progress.
ReplyDeleteTo developer. You should maybe check file size and set update time according to that? For small files, the status bar never gets time to update.
may i know from where you all guys see the upload bar??
ReplyDeletei have uploaded large as well as small image but nothing happened also checking i different browsers meas firefox as well but :(
why the demo not seen completely??
one more thing want to say Please correct the Linux APC Installation instead of Linuk APC Installation
Hallo everyone,
ReplyDeleteI need your help. Am setting up a web site on which users can upload files and allow other users to download them.
Can some one tell me please how do I make a file to be downloaded from the server to the client on my site?
Halla at me at [email protected]
hi
ReplyDeletenice
ReplyDeleteGreat article.Excellent php code is used.Thank you very much nice sharing.
ReplyDeletegreat work bro !!
ReplyDeleteplease post tutorial about zend framework
ReplyDeleteplease, post the css of progress bar.
ReplyDeleteProgress bar is not visible
ReplyDeletenice post really useful...
ReplyDeleteVery nice tut.!!!!
ReplyDeleteGood job, thanks :D
ReplyDeleteHello Brother.
ReplyDeleteProgress Bar does not work
With IE files are uploaded but the progress bar doesn't work
ReplyDeletehow do you enable the apc extension when using php 5.4?
ReplyDeleteMan, great post!...
ReplyDeleteBut i'm so confused and tired of trying to make it work properly.
My progress bar is not reaching 100%.
do you know any resolution for that?
Thanks!
nice but when not upload in this progress bar no information are come in this bar
ReplyDeleteprogress bar showing when we click on upload button.... please tell me how we show same progress bar only after browse or without clicking on upload button.... like attachment in gmail
ReplyDeleteFor those who do not see the progress bar at first.
ReplyDeletein the index.php file the javascript must be in between the php and the html. The Javascript has an php echo $uiq and must be defined by the php first.
Also make sure you read and install the boostrap css also. After that it worked 100%
Oh man, perfect!!!!!
ReplyDeleteThanksss a lot from Brazil!
where to put the javascript file
ReplyDeleteHi.
ReplyDeleteI tested all of your suggestions and I always get the same problem : "current" and "total" values are still to 0. I am wondering where it comes from and asking myself if APC is really working with my file.
Any suggestion ?
I really tried a LOT of things...
Just an FYI.. even though I am subscribed I was not able to download the files when I entered my email address. I am a regular visitor to this site but not being able to download drives me away from the site. Eventually I looked at other sites for the same code.
ReplyDeleteVery nice work, congratulations,
ReplyDeleteI installed a new Server with apc feature
what is the php.ini settings
Can you help
best regards
Good Tutorial
ReplyDeleteNice. Please Some one should help me with Upload Script for a zip file.
ReplyDeletehow i connect this script with data base...
ReplyDeleteFirst time it worked in the Live Demo, now it writes thast successfully uploaded, but no progess visible.
ReplyDeleteFor those of you still not seeing the progress bar, try these things:
ReplyDeleteMake sure to include bootstrap.css
Make sure APC is installed
Make sure to add these to php.ini:
extension=apc.so
apc.rfc1867 = on
That last one, rfc1867 is required for progress upload statuses to work.
Gr8 solution. :)
ReplyDeleteGreat thank you very much
ReplyDeletethank you :)
ReplyDeleteReally awesome...But there is one problem...when I upload a small sized pic say, 10KB, then it just shows 0% and then gets uploaded
ReplyDeleteawesome man.... thanks a lot !!
ReplyDeleteThis is scam the database is never updated you can not download even you are subscribed to their news letter.
ReplyDeleteHi, there is any tutorial for video conversion using ffmpeg or any other way.....
ReplyDeleteReally nice. We were looking for exactly this to use on our staff's back-end document upload section. Thank you for your help!
ReplyDeleteThe Progrees bar is not runing 100%. still is showing empty. bascially the hosting is Linux server, related DLL files are configured. still also not getting result. colud u plz help me out
ReplyDeleteArun,
ReplyDeletePlease help...
apc_fetch returns data once file completely up-loaded.
while file getting up-loaded it always return false so I always see 0%.
The Progrees bar is not working with fronted Nginx or other. only with apache.
ReplyDeleteI have done some modifications and now it's work.
ReplyDeletehttps://dl.dropboxusercontent.com/u/6347350/FilesUpload_PHP_APC_JQuery.zip
tanks for tutorial :)
ReplyDeleteTHKX A LOT
ReplyDeleteTHanks a lot. I also found very useful a example found on Github: https://github.com/pH-7/PHP5.4-Session-Upload-Progress-Bar
ReplyDeleteit's not working. Your demo doesn't work too.
ReplyDelete