This is an excerpt from the HTML5 Solutions: Essential Techniques for HTML5 Developers book by Apress (where I'm one of the author).
How to build it
From a technical point of view, the only thing you need to be aware of to allow the user to upload multiple files is to add the multiple attribute in the declaration of the tag file input type.
Here is a complete example:
<!DOCTYPE html> <html> <head> <title> Solution 4-5: Sending multiple files </title> </head> <body> <form id="myForm"> <fieldset> <legend>Solution 4-5: Sending multiple files</legend> <label>Upload one or more files:</label> <input type="file" name="multipleFileUpload" multiple /> <br /> </fieldset> </form> </body> </html>
The files that the user selects will have to be sent to the server and processed using server-side language. Some programming languages, such as PHP, require you to add brackets to the name attribute of the tag to send multiple files:
<input name="filesUploaded" type="file" multiple />
By doing so, PHP will construct an array data type, which will contain the uploaded files on the server. If you don’t specify the brackets, the programming language will process the files in order and only provide the last file in your script.