View Full Version : JS upload image progress bar

06-02-2009, 05:38 AM
Hello every, I'm new here and I know i only have one post but I promise to stay active...

Would anyone know a good code for a progress bar that is positioned in the center of an image every time it is used... I also don't want a set number of frames I want it to correctly say the progress %...

Hope that isn't to much to ask... I've tried google but didn't really get anywhere...

Old Pedant
06-02-2009, 06:48 AM
It's not easy. It means you need a server side component that is capable of measuring the progress. Many of the standard file uploaders don't have that capability.

The "trick" to it is to use AJAX to *get* the percentage from the web server.

Now, in the meantime the web server, on some other thread, is doing the actual upload. So the uploader has to "report" the percentage cross-thread to the AJAX responder.

One possible way to do this:

-- Your HTML page with the <input type=file> also has a HIDDEN form field with a value created via JS. The value is a random number--a GUID would be ideal, but make it at least a 32 bit random number (or maybe use a random string of characters??).

-- The uploader gets the info about the file being uploaded *AND* that random number/string.

-- As it is uploading the file, it periodically reports its progress (as a percentage) into a database (or, in some systems, such as ASP/ASP.NET, into an "Application variable") using that random number/string as the "key" for the data (so that multiple users can be uploading at the same time).

-- Your web page uses JS AJAX coding to hit the web server, as noted above, every few seconds and asks for the current percentage. You must display that percentage via a "popup" window or similar device, as the underlying form--doing the uploading--won't be "active".

-- A slight improvement on the above is to put the <FORM> into an <IFRAME> on the web page, so that the uploading is taking place independently of the web page and then the progress bar can be just a <div> on the main page.

If all this seems complicated, it is. If you don't have the means of creating your own file uploader, you are dependent on somebody else's uploader component having the needed progress monitoring builtin.

06-02-2009, 07:24 AM
would a web page preload be any easier...?

And yes that does seem a bit too complicated... just started using Editplus 3 and DW... But thank you for giving me an understanding...


Old Pedant
06-02-2009, 08:57 AM
Sorry...what do you mean by "web page preload"??

What language/system are you coding in??? PHP? ASP? What? I know of a commercial product for ASP, not too expensive. No experience doing this with PHP, though I'm 98% sure that the standard $_FILES method in PHP doesn't have this feature, so you'd have to find a way to do it yourself, most likely.

Old Pedant
06-02-2009, 09:01 AM
And by the by, because this is so very difficult, you see *most* web sites displaying "dummy" progress bars...basically just animate GIFs the look like progress bars but that don't really measure anything.

06-02-2009, 09:13 AM
..but programs like swfupload (http://demo.swfupload.org/v220/index.htm) show the correct progress bar?

06-02-2009, 11:44 PM
is this one fake... http://www.stillsgallery.com.au

06-02-2009, 11:58 PM
That one is real, but it's pure flash, which makes it very easy.

Old Pedant
06-03-2009, 12:04 AM
..but programs like swfupload (http://demo.swfupload.org/v220/index.htm) show the correct progress bar?

swf: Flash.

As I said, if you find a component to do it, then possible. Flash is just one such component.