A good "loading" function in combination with a picture upload utility (PHP + JS)

Question

I have a classifieds website, and when posting a new ad, users may chose to upload pictures.

Currently, the form on the page submits to itself whenever a file is chosen, and then PHP uploads the actual file, which is then lastly displayed to the user.

I use javascript to set some hidden-inputs on the page, and then submit the form to itself:

if (action!='remove'){
document.getElementById("pic_nr").value=nr;
document.getElementById("total_pics").value=nr;
document.getElementById("pic_action").value='upload';
var form = document.forms['ad'];
form.action='new_ad.php';
    form.submit();
}

Then in PHP, it processes and uploads the image (which takes some time) and after its done the image is displayed in the same form.

Now I need to have a progress bar of some kind, which shows the user that the server is actually DOING something.

Because uploading a standard 2,5MB file from a digital-camera takes some time (around 10s), and usually the user doesn't understand that "something is happening" in the background.

Is there any standard reliable, cross-browser solution to add a loading bar with either JS or PHP, or even maybe both combined?

Any tips and ideas are appreciated.

Thanks

Answer 1

This site seems to have a pretty comprehensive list of tutorials with various approaches. JQuery to me would seem to be the best option to go with as it usually is pretty reliable between browsers and platforms.

Answer 2

you could POST the form using AJAX and on firing the form POST load a "loading" spinner on the page until you get a postback with a status from the server.

I'm adding a link to a sample HTML5 script that does it with drag-n-drop...

http://craigslist.fatherstorm.com/dragndrop.php