HTML and CSS Reference
In-Depth Information
Figure 5-13
The file browser displayed when a user clicks the file input in Mac OS X.
Selecting Multiple Files
Before HTML5 came along, the only way that you could confidently handle multiple file uploads was to use
Adobe's Flash technology. This caused a few headaches for developers who just wanted a simple solution for mul-
tiple file uploads. Yet again, HTML5 has come to the rescue by allowing multiple file uploads with the simple use of
the
multiple
attribute.
The following example shows how you can allow a user to select multiple files using a single <
input>
element.
<label id=”pictures”>Upload Pictures:</label>
<input name=”pictures” id=”pictures” type=”file” multiple>
This is a new addition in HTML5. Older web browsers do not support the
multiple
attribute.
Specifying Accepted File Types
If you are expecting a user to upload a picture of himself to use as an avatar on your social networking site, you want
to be sure that he doesn't try to upload a spreadsheet instead. The
accept
attribute enables you to specify what type
of file you are expecting so that the browser can launch a file browser that will only allow the user to select those
types of files.
