By
Firefox 3.6 supports multiple file input. This new capability allows you to get several files as input at once, using standard technologies. This is a big improvement, since you used to be constrained to one file at a time, or needed to use a third party (proprietary) application. This will be particularly useful, for example, for photo uploads.
The input tag
To let your user select a local file, use the input tag on your Web page. This will show the file picker to the user:
In Firefox 3.6, the input tag has been expanded to support multiple files:
The user will still see the same file picker, but will be able to select more than one file.
The form tag
You can still use the classic form mechanism:
If the server side code is in PHP, don’t forget to make sure that the value of the name attribute has brackets. The brackets are not from the HTML specification, but are required to manipulate the result of the request as an array (see PHP documentation).
Here’s an example, which goes through the file list and prints each file name:
foreach ($_FILES['uploads']['name'] as $filename) {
echo 'Using File API
Firefox 3.6 also supports FileAPI. This allows you to do extra processing on the client slide before sending the files to the server. You can access the selected files with the files property of the input DOM element and then manipulate the files using the FileAPI.
For example, here’s how to get the name of each file selected by the user. This is done on the client side, unlike the previous PHP example.
var input = document.querySelector("input[type='file']");
// You've selected input.files.length files
for (var i = 0; i < input.files.length; i++) {
// input.files[i] is a file object
var li = document.createElement("li");
li.innerHTML = input.files[i].name;
ul.appendChild(li);
}
Demo
See this mechanism in action in our multiple file input demo. You'll need Firefox 3.6 (beta).
Documentation
To learn more about multiple file input, check out the documentation on MDC.
About Paul Rouget
Paul is a Firefox developer.
28 comments