Gmail like file upload with jQuery

Question

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

Answer 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.

Answer 2

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.

Answer 3

PHP doesn't support reporting of upload progress directly. So there is no way of reading the upload status back. However, there is a patch that might work. I haven't tried though.

Answer 4

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

Answer 5

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.

Answer 6

Maybe you could use PlUpload. It has support for a lot of types and is highly customizable. You can check out the demos on the website. On the homepage it also shows what it supports on the homepage and has a fallback mechanism.

http://www.plupload.com/

Edit: It is available as a jQuery plugin.