AJAX Activity Indicator

[iBrightDev]

I have looked all over the place for an activity indicator so that when a submit button is clicked it will show up untill the activity is finished. i found only one script, but it required some script from some huge js thing that i didnt want to include in my site. i only want the simple activity indicator script. anyone know how to make one. i already have the animation i want.

[krakjoe]

post the form html and a link to the image ....

[iBrightDev]

<form name="upload" id="upload" ENCTYPE="multipart/form-data" method="post">
Upload File <input type="file" id="userfile" name="userfile">
<input type="submit" name="upload" value="Upload">
</form>

http://www.methodcomptech.com/uploadscript/files/ajax_indicator.gif

[brutetal]

Is it also possible to show the file size and percentage finished?

[iBrightDev]

that would be nice to have as an option if you want to throw a div in that is just not visible unless the css is changed to be visible.

[Richard]

PHP cannot support the file size of a file being uploaded, it may be something they are going to look into later. At the current time, if you wish to do a status bar of such with the estimated time remaining, you will need to use a Perl or CGI script to upload the file.

[krakjoe]

ooooh, php can, curl and callbacks ....

I'm not home right now, gimme a little while ...

[iBrightDev]

PHP cannot support the file size of a file being uploaded, it may be something they are going to look into later. At the current time, if you wish to do a status bar of such with the estimated time remaining, you will need to use a Perl or CGI script to upload the file.
wronge, saw one yesterday that does it, but no source code to show

ooooh, php can, curl and callbacks ....

I'm not home right now, gimme a little while ...

and you are right, like i stated above. and thanks Joe. it will be nice to finally have an indicator.

[krakjoe]

oh no need, someone else done it already :
http://blog.joshuaeichorn.com/archives/2005/05/01/ajax-file-upload-progress/

[iBrightDev]

well sort of what i want. i want to use the indicator i posted the link to that you requested, and i want it to go away when the upload is done, and have hidden div that shows the percentage if i choose to unhide it. but next to the indicator, i want it to say something like "upload in progress" also, that one doesnt show the source. can you still help Joe?

reason i ask, is i dont only want to use this for the upload indicator, i want to show in a page when a form is submitted too. like how on FWS you see the indicator when you submit a query. i like that. that is what i am really looking for

[krakjoe]

that's pretty easy, you just put document.getElementById('loading').innerHTML = "<img src='loading.gif'></img>"; then the rest of the function, either have ajax load content into loading div or change the innerhtml back to ""

[iBrightDev]

might you give an example of this with the image i provided so that i can see what you mean. i dont quite understand.

[iBrightDev]

i tried putting this in the form area, but saw nothing

<script type="text/javascript"> document.getElementById('loading').innerHTML = "<img id='loading' src='ajax_indicator.gif'></img>"; </script>