File Upload progress bar...

Arc

Anyone found a reasonble way to show a progress bar for file uploads in php?

I don't need an upload form or image processing scripts, I just need a progress bar to integrate into my existing upload pages.

Or if that is too hard ( which apprently it is from all my searching on the web), is there any way to atleast force the next page to display immediately while the file is uploading so I can have a message saying the file is being uploaded or something?

I have tried flush() and obflush(), but they don;t seem to work on file upload pages.

thanks!

cheerio

Progress bars for file uploads are pointless unless the file is like over 15MB. I don't think you can 'force' it to go while it's uploading, but I think the best method would be to make an uploader with Flash. That way you can have a progress bar, and it's all dynamicy 😉

If not, just have it so that when the user clicks submit it shows a loading image, that works too

Arc

Show a loading image where? The next page will not display untill the files are uploaded. The only way I can think of to do that would be in a Popup window, but then how do you mak the window close when the next page actualy loads?

mjax

Check out these URLs:

http://tomas.epineer.se/archives/3
http://www.radinks.com/upload/plus/applet.php
http://the-stickman.com/web-development/javascript/upload-multiple-files-with-a-single-file-element/

Arc

None of those will work... Fo rone thing, Like I said, I don;t need a new upload form or image/file processing code, I just need a progress bar..It doesn;t even have to give me actual progress, It just needs ot show the user that something is hapening so they don't sit at a page for 5 minutes wondering what is going on.

bogu

Arc wrote:
Show a loading image where? The next page will not display untill the files are uploaded.

Yes it will ...
Just add onload event that show the image ...

Weedpacket

You can also check the FAQ.

Arc

bogu wrote:
Yes it will ...
Just add onload event that show the image ...

I assume you mean the onLoad event in the <body> tag?

Care to give me an example?

Thanks!

scrypted

Use a javascript event function with your froms submit button.

Put this in your page head:

Make your submit button call the show progress event function with an onclick:

Then stick this next to your submit button:

That shouldw work out fine for you! Feel free to use that image from my server.

cheerio

You can also get cool loading images from http://ajaxload.info/

Arc

scrypted wrote:
Use a javascript event function with your froms submit button.

Put this in your page head:

<script language="JavaScript">

</script>

Make your submit button call the show progress event function with an onclick:

<input type="submit" name="submit" value="Upload Picture" onclick="javascript:showProgress();">

Then stick this next to your submit button:

<span id="progress" style="visibility:hidden"><img src="http://battlescrypt.scrypted.com/images/busy_blue.gif"/>

That shouldw work out fine for you! Feel free to use that image from my server.

Scripted, thanks for that, it seems pretty cool. However, the page just sits there showing the image and doesn't ever go to the next page.

Any idea what's wrong? Thanks mate!

Arc

cheerio wrote:
You can also get cool loading images from http://ajaxload.info/

Thanks cheerio, that's pretty cool

Arc

Well, I think the problem was that the submit button was disabled in the javascript. It uploads now, but th eimage just shows and freezes, you don't get the animation.

ClarkF1

A neat text-based version that works in PHP

http://www.devpro.it/upload_progress/

It doesn't work as well on shared hosts......something to do with the temp folder.

rikmoncur

I used Scrypted's method with a few wee changes.
To get it to work in IE and Firefox, I took out the line to disable the submit button and put the onclick event into the form tag and changed it to onsubmit.

Calling javascript does seem to kill off animated gifs so I replaced the gif with a flash file and it works ok.

thanx to everyone for their input!

jpratt

so how did the final code look? i am interested in adding this to my uploader. Thanks.

jpratt

my main question is how you added the swf file instead of the gif?

rikmoncur

You could make or find a flash file and add it so:

add flash file here

</span>

jpratt

nevermind, had the code right, just the path to the swf i made was wrong. Works great!

sibsoft

Unfortunately this couldn't be done using PHP only. There are several ways:
1. Patch PHP.
2. Use Perl for upload.

We've used 2nd way, because patching PHP is not possible on virtual hosting.
You can check our upload progress bar. If you will have any questions - let us know.

Thanks