10+HTML5 File Upload with jQuery Example

Essentially, during you are uploading files, it perfect to show progress bar or size byte stream of current upload, it is receiving a file so you know how many bytes you’ve received and somehow convey that information back to the client browser, while it is still in the process of uploading the file.

As per the Html5 Progress Eventsspec, the Html5 progress event provides the following information relevant to this conversation, total – Total bytes being transferred, loaded – Bytes uploaded thus far, lengthComputable – Specifies if the total size of the data/file being uploaded is known

Developing a small web application called Upload Center, that will allow people to upload photos from their computers by dragging and dropping them onto the browser window, possible with the new HTML5 APIs exposed by modern browsers.

Here is how you can implement drag and drop multiple file upload with native JavaScript. No plugins needed. Just plain old new HTML5. Again there is a working demo. You will need FireFox 3.6 to test it. Full source code can be at GitHub.

This plugin uses XHR for uploading multiple files with progress-bar in FF3.6+, Safari4+, Chrome and falls back to hidden iframe based upload in other browsers, providing good user experience everywhere.