9lessons programming blog
Loading Search
9lessons Bring Friends
Wall Script
Follow Me:
Monday, April 9, 2012

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.

File Upload Progress Bar

Download Script     Live Demo

Developer
Arun Kumar Shekar
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 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>
Comments
{ 78 comments }
Karthikeyan K said...

nice one.. great tutorial

Anonymous said...

Any chance to update you newsletter database so we can download this fantastic script?

Thanks in adv

Swetha said...

Good tutorial. Thanks

Anonymous said...

does it works with more then one file?

Kathirason said...

Great work Arun..

magori said...

what about multiple upload when you browse you can select multiple picture and upload like facebook or gplus

Anonymous said...

OMG, Linuk? :) Maybe, Linux?

facebook video indirme said...

Thanks... It is so important for web2.0

Topík said...

I got some problem with installing lib to debian... did anyone solve that? :) thanks

LaptopTrieuKhang said...

fantastic

RatkoWitch CeLkA said...

First time it worked in the Live Demo, now it writes thast successfully uploaded, but no progess visible.

Anonymous said...

Subscribed in the morning and still not able to download the scripts???

I think you should rethink of your subscription policy!!!!!!!!!

Thanks

Leonardo said...

Perfect it's what I was searching

Thanks

Sree said...

nice tut!

Sree said...

very nice tut:)

fbaretto said...

Excelente aporte.
Estaría buenísimo que fuera multiarchivo y arrastro y suelto. Abrazo.

greg said...

hi, what about linux? the dl has the dll file. ty

Joseph Ndungu said...

Thats a great one!! was allover the internet looking for such a script thanks!!

dedy-design said...

this, very helping me..thanks'

Bryan Tan said...

What PHP Framework do you usually use @ Srinivas?

Anonymous said...

Good work Arun thanks alot i really need it on my project ..keep it up.

Regards
Salman Ahmad

Anonymous said...

not working in ie 8..

just my blogs display said...

it's not work....not show progress...just 0 % and success upload...

Jegan said...

Nice Tutorial. Thanks. Going to use in my future projects.

Peter said...

Thank you very much for your good tutorial!

Anonymous said...

You´re the guy ! Thanks a lot

Anonymous said...

I want multiple uploads.
How to achieve that?

.:: shankar ::. said...

nice upload work yar... but i need this with multiple file upload option , can u plz post r make change it in ....

neeraj said...

friend i am unable to run it my php version is 5.3.8 what should i do?

fbaretto said...

Excellent contribution.
It would be cool if multifile and dragged out and loose. Embrace.

uthaya said...

nice

Anonymous said...

Problemas con la barra no carga, problemas con la instalación de APC

Krunal said...

Realy Nice Work
Thx A Lot :)

Anil kumar said...

Really Nice Script Dude

Syaiful said...

good job

Kira said...

How do i check file upload size?

Anonymous said...

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.

jacob said...

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

prince said...

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

Anonymous said...

hi

askar said...

nice

David said...

Great article.Excellent php code is used.Thank you very much nice sharing.

Anonymous said...

great work bro !!

Anonymous said...

please post tutorial about zend framework

Blacknuclear said...

please, post the css of progress bar.

Anonymous said...

Progress bar is not visible

tshering bhutia said...

nice post really useful...

Anonymous said...

Very nice tut.!!!!

oussama said...

Good job, thanks :D

Shubham Kumar said...

Hello Brother.
Progress Bar does not work

Anonymous said...

With IE files are uploaded but the progress bar doesn't work

Anonymous said...

how do you enable the apc extension when using php 5.4?

Ricardoo said...

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!

web degin said...

nice but when not upload in this progress bar no information are come in this bar

Anonymous said...

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

Jacques Mulder said...

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%

Anonymous said...

Oh man, perfect!!!!!

Thanksss a lot from Brazil!

Anonymous said...

where to put the javascript file

Anonymous said...

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...

Anonymous said...

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.

Mustafa said...

Very nice work, congratulations,
I installed a new Server with apc feature
what is the php.ini settings
Can you help
best regards

Aakash Kumar said...

Good Tutorial

Salim Saad said...

Nice. Please Some one should help me with Upload Script for a zip file.

Anonymous said...

how i connect this script with data base...

Anonymous said...

First time it worked in the Live Demo, now it writes thast successfully uploaded, but no progess visible.

Tyguy said...

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.

Anonymous said...

Gr8 solution. :)

Anonymous said...

Great thank you very much

ferman said...

thank you :)

Deval Khandelwal said...

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

Anonymous said...

awesome man.... thanks a lot !!

Anonymous said...

This is scam the database is never updated you can not download even you are subscribed to their news letter.

Abhisekh Kushwaha said...

Hi, there is any tutorial for video conversion using ffmpeg or any other way.....

Jim said...

Really nice. We were looking for exactly this to use on our staff's back-end document upload section. Thank you for your help!

Arun kumar said...

The 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

Rakesh said...

Arun,
Please help...
apc_fetch returns data once file completely up-loaded.
while file getting up-loaded it always return false so I always see 0%.

WebGraf said...

The Progrees bar is not working with fronted Nginx or other. only with apache.

NeoPablinho said...

I have done some modifications and now it's work.

https://dl.dropboxusercontent.com/u/6347350/FilesUpload_PHP_APC_JQuery.zip

Post a Comment