Blog

Back 44 Comments

A Better PHP Upload Progress Bar Using jQuery


Hopefully, this example of a PHP file upload progress bar will be helpful to PHP  developers who are looking for a simple way to display a file upload progress bar into their online forms and web applications.   This particular method uses jQuery to make the repeating calls to the server to check the status of the upload.

View the demo

Webmaster
February 10, 2010 7:36am
I integrated a new (better) PHP Upload Progress Bar Script in my PHP project.
But script shows %Nan instead of actual percentage. I have installed all server settings properly.

Please help me, how to fix this problem?

Thanks in advance.
Curtis
March 6, 2010 8:42am
I would like to use your script for my multi file upload but I am not able to install apc though I do have php cache and php cache lite, will those work?
Lee
March 11, 2010 6:33pm
Hi! I have the same problem as Webmaster, it displays NAN% and not the %.. :( How can I fix this??
Maxime
April 9, 2010 3:11am
Hi, as Webmaster, I also have the same problem... A solution would be welcomed !
shamubro
April 18, 2010 12:18am
thanks for the great script.

but there is a "bug" in upload_frame.php

$.get("?progress_key=&randval="+ Math.random(), {

change it to

$.get("?progress_key=&randval="+ Math.random(), {


this makes the upload process stays 0 due to the register_globals = off
shamubro
April 18, 2010 12:18am
$up_id to $_GET['up_id'] in line 47
Lee
April 30, 2010 9:48am
whats going on in this block of code...can you add comments please

var refreshId = setInterval(function()
{
$.get("?progress_key=&randval="+ Math.random(), {
//
},
function(data)
{
$('#progress_container').fadeIn(100);
$('#progress_bar').width(data +"%");
$('#progress_completed').html(parseInt(data) +"%");
}
)},500);


i see that its in a JQuery body

1. what value is being pasted to data?

2. what is var refreshId variable doing?

3.where is the value coming from being feed into the #progress_bar width?

4. How is the setInterval function controling the progress bar?
John
May 3, 2010 11:43am
Lee - check the new files for updated comments.

Thanks,

John
Lee
May 4, 2010 2:57am
How do i install the uploadprogress PHP extension on windows
i get this error message

PHP Startup: Unable to load dynamic libary 'C:\Program Files\xampp\php\ext\uploadprogress.so'-The specified module could not be found.
when i start XAMPP Apache server

can you email me a copy of the uploadprogress.so file...because i can't get your scripts running local without it.

http://pecl.php.net/package/uploadprogress
Blade
May 8, 2010 12:49pm
Still have problems with the NaN% issue, I downloaded the latest files and nothing...

how do I solve it???

thanks in advance...
Lemo
May 14, 2010 2:27pm
I managed to solve the NaN% issues by changing this line of code:

$('#progress_bar').width(data +"%");

to

$('#progress_bar').width(data || 0 +"%");

The || 0 (double pipe and zero) returns 0% when the value being calculated is NaN (not a number)

Hope it works for you also.

Lemo
Kirk
June 8, 2010 9:12am
I have the upload working, but the progress bar remains at 0% with no animation - Using Gentoo Linux with Apache2/PHP5.2.10 APC 3.0.19 (enabled on phpinfo). I am also unsure about the 'yui' folder, do I need this in the web directory?
Drumaboy
June 8, 2010 3:56pm
this is all I get please help:

I've installed ACP per your instructions


Warning: move_uploaded_file(tmp/Cost Comparison MI - Retail cost Oct 2009.pdf) [function.move-uploaded-file]: failed to open stream: No such file or directory in /home/cdintl5/public_html/test/upload.php on line 18

Warning: move_uploaded_file() [function.move-uploaded-file]: Unable to move '/tmp/phpCU3eFb' to 'tmp/Cost Comparison MI - Retail cost Oct 2009.pdf' in /home/cdintl5/public_html/test/upload.php on line 18

Warning: Cannot modify header information - headers already sent by (output started at /home/cdintl5/public_html/test/upload.php:6) in /home/cdintl5/public_html/test/upload.php on line 23
John
June 17, 2010 8:32am
Drumaboy - The error you're receiving means that your tmp/ directory doesn't exist and you need to first create this directory - or another directory (example: files/, uploads/, etc..) and change it in the upload.php code.

Thanks,

John
Oliver
June 18, 2010 1:42pm
First I want to say great job with this script. Once you get everything configured, it works very nicely.

My problem is that I switched from a server running Apache2 to one running CGI. Although it could be caused by something else, I think that I am receiving the NaN% error because of this switch, and I was wondering if there is anyway to get around it. I'd really like to use this script since it is the easiest to implement. Thanks againf or all your help.
Connor
August 20, 2010 10:31am
I installed APC and turned on "apc.rfc1867" as shown by my phpinfo file. When I upload a file, the progress bar starts and finishes in seconds, even with a 5MB mp3 file. Changed directory to one that exists. Running PHP 5.3.3 with APC 3.1.4

What could be the problem?
Bianca
July 9, 2010 2:50am
I used your files and I have NaN% error
I used yours suggestions from this pages but is the same error
Can you help me?
Darren
September 9, 2010 11:59am
I am also receiving the NaN% error. Any help would be greatly appreciated.

Cheers
Darren
Darren
September 9, 2010 12:57pm
Hi there,
I am no longer receiving the NaN% error, but now I get a 0% in the progress bar and receive the "Your file has been uploaded" message (and the file has been uploaded). Do you have any suggestions?
John or anyone.

Cheers
Darren
Darren
September 9, 2010 3:41pm
Hi John,
I emailed you my info, any ideas?

cheers
Darren
Eddy
September 30, 2010 5:30am
Is there now no solution for NaN%
nikul
October 7, 2010 4:48am
hello!

I am getting same error of NaN% while uploading. I think need to configure APC after installing. My current APC settings are:

apc.rfc1867 On
apc.rfc1867_freq 1
apc.rfc1867_name APC_UPLOAD_PROGRESS
apc.rfc1867_prefix upload_
apc.rfc1867_ttl 3600
apc.shm_segments 1
apc.max_file_size 100M

Please help me if i am missing anything.

Thanks!
Gregory
October 13, 2010 4:23am
Hi there,

I have the same problem as some of you above. The file uploads just fine, but the progress bar stays at 0% the entire time. I don't know what could be wrong, register_globals is off, apc is on, as phpinfo() shows it, and I also have the tmp folder, and the file uploads. All seems to be well, but the progress bar just doesn't move.

Has anyone solved this already?
Jack
November 9, 2010 3:35pm
I have problem of NaN%
Anybody help ?
John
November 10, 2010 9:20am
This script will not work correctly if your server is running PHP as FastCGI.

If everything is installed correctly and you're still getting NaN%, then you're most likely running PHP as FastCGI.

Hope this helps.

John
Jack
November 10, 2010 11:46am
My page is on xtreemhost.com server.
http://upeq.xtreemhost.com/
So, how fix this problem on this server ?
Alex
February 10, 2011 4:00am
hello nice piece of code thanks for that... works like a charme

but i've a question concerning the upload rate... can you help me with that..

thanks in advance
uks
April 23, 2011 4:31am
Hi John, thanks for the nice script. But unfortunately i still got the same problem "NaN %"
If you don't mind if we accessing your phpinfo so we can compare all the apc setting with your server.

Thanks and happy easter day
rich
November 11, 2012 9:45pm
Still getting NaN %, anyone mind help?
Stephen
September 11, 2011 6:25am
I'm trying to make my users upload files greater than 3GB , but with this its not working.
Firefox - not working
IE & Chrome - the
$status['total']is a (-ve) value (wrong too)
$status['current']/$status['total']*100 gives a (-ve) value and even if I convert to using ABS in php its not working, but atleast in IE and Chrome it attempts to transfer the file.

Can you please help me to chuck the file so that it can be sent in chunks from Firefox,IE or Chrome to the server.
or a better solution for larger files
Ali
August 26, 2012 2:45am
Hi,

The progress bar stays at 0%. all tested and ensured that the installation and settings are correct.

Please help. I can send the url and login details if needed.
Laveen
September 8, 2012 1:26am
Everything installed but the progress bar stays at 0%. Using PHP Version 5.4.6 & no Fast CGI. APC installed and apc.rfc1867=On.

No solutions yet?
web_dev
September 17, 2012 11:41pm
I just recently used your code. and it's working fine :)

i just dont know, why its not working in Chrome. but when i viewed it on mozilla, its working fine.
John
September 18, 2012 8:11am
Someone else had this same problem and figured out they were running Chrome in "Developer Mode".
peppe
October 30, 2012 9:28am
Hi John, tnx for great job!

Installed e perfectly ran on fedora17/php5.3/apc
ajay
December 16, 2012 11:21pm
Hi,
still i m getting NaN in progress bar .......

any solution for this ...???
1tox
January 4, 2013 4:11pm
Hello,

Like ALI, Everything installed and everything work but the progress bar stays at 0%. APC installed rfc1867=on and extension=apc.so OK
Help ...
!NULL
January 9, 2013 9:27am
Hello everyone, This script is working or not ? NaN% ??? what is this ?
natsume
February 5, 2013 2:57am
it works thanks!
Tysonpower
February 12, 2013 2:40pm
Hi

I had an %NA Error but why?

here my php configs from APC:

apc.rfc1867 = on
apc.rfc1867_freq = 0
apc.rfc1867_name = APC_UPLOAD_PROGRESS
apc.rfc1867_prefix = upload_

I hope you can help me.
george
February 20, 2013 11:49am
there is a problem, from firebug u can see error "Division by zero" on line bla bla bla, that because its return Null in Progress bar, any suggest??
jim
February 26, 2013 9:16am
Hi, I downloaded and tried it but video file is not accepted. I browsed the code but didn't see anywhere it checks the file extension. What's the trick?
Neeraj thakur
March 6, 2013 4:41am
I am running APC, apc_fetch gives array only when file fully uploaded on the server, but return false while and during uploading...
so that i am not getting progress percentage..
all setup is right.
server api is CGI/Fast CGI..

Can anyone help in finding solution for it..
Million of Thanks in advance
saeed
March 19, 2013 3:19am
Hi John,
Everything Is Installed Perfectly But the given error is displayed after upload the file and also the progress bar is not shown

Warning: Cannot modify header information - headers already sent by (output started at /home2/smco/public_html/Progressbar/upload.php:6) in /home2/smco/public_html/Progressbar/upload.php on line 23


Your comment has been posted....