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:
<input type="file"/> |
In Firefox 3.6, the input tag has been expanded to support multiple files:
<input type="file" multiple=""/> |
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:
<form method="post" action="upload.php" enctype="multipart/form-data"> <input name='uploads[]' type="file" multiple=""/> <input type="submit" value="Send"> </form> |
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 '<li>' . $filename . '</li>'; } |
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.
Pingback from file drag and drop in Firefox 3.6 at hacks.mozilla.org on December 14th, 2009 at 12:37 pm:
Pingback from interactive file uploads with Drag and Drop, FileAPI and XMLHttpRequest at hacks.mozilla.org on December 15th, 2009 at 11:01 am:
Pingback from Firefox 3.6 | FOX21.at: Free Software, Freeware, Perl, PHP, MySQL, Scripts, HOWTO, Gentoo Linux, IP2Location, Location2IP on January 21st, 2010 at 12:00 pm:
Pingback from Nitin Katkam » Multiple file input in Firefox 3.6 on January 24th, 2010 at 4:36 am:
Pingback from How to make Joomla upload multiple files « oc666 zone on January 27th, 2010 at 1:55 pm:
Pingback from Firefox 3.6에서 다중 파일 input 태그 ✩ Mozilla 웹 기술 블로그 on May 17th, 2010 at 5:02 am:
Pingback from Firefox 4: HTML5 Forms ✩ Mozilla Hacks – the Web developer blog on November 11th, 2010 at 10:21 am:
Pingback from Bug du sélecteur de fichiers dans Gnome/GTK avec Flickr « Antoine Turmel on April 4th, 2011 at 1:18 pm: