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
Any chance to update you newsletter database so we can download this fantastic script?
Thanks in adv
Good tutorial. Thanks
does it works with more then one file?
Great work Arun..
what about multiple upload when you browse you can select multiple picture and upload like facebook or gplus
OMG, Linuk? :) Maybe, Linux?
Thanks... It is so important for web2.0
I got some problem with installing lib to debian... did anyone solve that? :) thanks
fantastic
First time it worked in the Live Demo, now it writes thast successfully uploaded, but no progess visible.
Subscribed in the morning and still not able to download the scripts???
I think you should rethink of your subscription policy!!!!!!!!!
Thanks
Perfect it's what I was searching
Thanks
nice tut!
very nice tut:)
Excelente aporte.
Estaría buenísimo que fuera multiarchivo y arrastro y suelto. Abrazo.
hi, what about linux? the dl has the dll file. ty
Thats a great one!! was allover the internet looking for such a script thanks!!
this, very helping me..thanks'
What PHP Framework do you usually use @ Srinivas?
Good work Arun thanks alot i really need it on my project ..keep it up.
Regards
Salman Ahmad
not working in ie 8..
it's not work....not show progress...just 0 % and success upload...
Nice Tutorial. Thanks. Going to use in my future projects.
Thank you very much for your good tutorial!
You´re the guy ! Thanks a lot
I want multiple uploads.
How 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 ....
friend i am unable to run it my php version is 5.3.8 what should i do?
Excellent contribution.
It would be cool if multifile and dragged out and loose. Embrace.
nice
Problemas con la barra no carga, problemas con la instalación de APC
Realy Nice Work
Thx A Lot :)
Really Nice Script Dude
good job
How do i check file upload size?
For 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.
To 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??
i 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,
I 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 afrofeel@free.fr
hi
nice
Great article.Excellent php code is used.Thank you very much nice sharing.
great work bro !!
please post tutorial about zend framework
please, post the css of progress bar.
Progress bar is not visible
nice post really useful...
Very nice tut.!!!!
Good job, thanks :D
Hello Brother.
Progress Bar does not work
With IE files are uploaded but the progress bar doesn't work
how do you enable the apc extension when using php 5.4?
Man, great post!...
But 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
progress 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
For those who do not see the progress bar at first.
in 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!!!!!
Thanksss a lot from Brazil!
where to put the javascript file
Hi.
I 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.
Very nice work, congratulations,
I installed a new Server with apc feature
what is the php.ini settings
Can you help
best regards
Good Tutorial
Nice. Please Some one should help me with Upload Script for a zip file.
how i connect this script with data base...
First time it worked in the Live Demo, now it writes thast successfully uploaded, but no progess visible.
For those of you still not seeing the progress bar, try these things:
Make 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. :)
Great thank you very much
thank you :)
Really awesome...But there is one problem...when I upload a small sized pic say, 10KB, then it just shows 0% and then gets uploaded
awesome man.... thanks a lot !!
This is scam the database is never updated you can not download even you are subscribed to their news letter.
Hi, there is any tutorial for video conversion using ffmpeg or any other way.....
Really nice. We were looking for exactly this to use on our staff's back-end document upload section. Thank you for your help!