| title | authors | intro | types | categories | published | updated | status | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|
How to allow user to upload multiple files using HTML5 |
|
HTML5 contains the a new feature (I say new, Opera... |
|
|
2012/01/04 12:00:00 |
2012/01/04 13:00:00 |
archived |
HTML5 contains the a new feature (I say new, Opera has had it since 2006) that allows you to upload multiple files.
By default this allows the user to select more than one file. The file choosing is handled by the operating system and so the exact experience varies considerably depending on the underlying operating system.
Once the files are selected the browser then renders various UI to signify the files that have been selected.
For browsers that don't support the multiple attribute it's simply ignored and the user can just select one image.
File API, Drag and Drop and the Progress control can all be combined to make it possible to write applications that accept files dragged in from the desktop which have customised UI and even enable you to modify the image size before you upload the file to the server. Using Cross-Site Upload you could even write an application that uploads to another website, as this IE10 demo shows.
Of course you can write your own code to handle multiple file upload, drag and drop etc but if you are looking for a quick solution then you could do far worse than using http://plupload.com/ This library allows you to have an uploader that will use what ever technology the browser supports from HTML5, HTML4, Flash, Silverlight, BrowserPlus or the now defunct Google Gears.
I've tested in IE10 (which now supports multiple upload, drag drop and the file upload) and the library worked without any modifications.