how to make an interactive uploader like gmail and facebook have?

Question

I want to make a interactive uploading option like Facebook and gmail have where they show the progress of the current file in uploading and then show the respective image or name of the file over there after the upload.

Right now, i'm using php and normal html for uploading where i send the file from one page to another where php handles it accordingly but i want a interactive one which show the progress also on the same page and then the name of the file after uploading without page refresh.

I knew, it can be done with ajax and css but i don't know how. All i want a interactive upload-er which uploads the file and then provide me the respective file name.

Answer 1

Gmail uses firefox file api, read more about it here https://developer.mozilla.org/en/Using_files_from_web_applications Or check this live demo http://robertnyman.com/html5/fileapi-upload/fileapi-upload.html

Hope this will help/solve ur problem ;) best luck