Blog

Back 29 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
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


Your comment has been posted....
Post a comment

Name


Email (won't be published)


Comments