Gmail like file upload with jQuery

I would like to upload files just like google mail does. I would want to use jQuery and PHP to do it is there anyway of getting the progressbar etc.?

Here I added a video of how google does it. http://dl.getdropbox.com/u/5910/Jing/2009-04-02_1948.swf

No flash, no perl or cgi please..

I guess I can live without the progressbar now I am actually searching for information about jquery plugins or just what things I would need to look at

Solution 1:

It is weird that people say that gmail doesn't use flash, when you can plainly see the swf file in the gmail interface. Try right clicking on "Attach a file". It is what allows the multiple uploads at once among other things.

Solution 2:

The easiest would be to use SWFUpload, it's a small button written in Flash, with all the hooks to drive it in JS. Very easy to use and works well with PHP

but, if you really want it to be pure JS, you'll need some help from the server. specifically, you'll need to start the upload, and periodically query the server about how's it going. unfortunately, PHP upload handling doesn't get any notification until after the download finishes. you'd have to replace it with something else. there are a few pure JS uploaders that include sample Perl server code just because of that.

IOW: JS and PHP don't (fully) cut it. either add flash to the client, or a better upload handler at the server.

Solution 3:

in my opinion an excellent article on this topic: http://robertnyman.com/html5/fileapi-upload/fileapi-upload.html

unfortunately support is lacking for IE and Opera, but hopefully this will change.

Solution 4:

Uploadify is another swf (sorry) upload button that uses jquery. Same idea as what Javier mentioned.