Grow your CSS skills. Land your dream job.

Last updated on:

Multiple File Input

File inputs can have an attribute of "multiple" which then allows multiple files to be selected in the file section dialog box. Firefox 3.6+ and WebKit browsers only are supporting it so far. Unfortunately the "multiple files" need to be within the same folder, as there is no interface for selecting one, moving folders, and selecting another.

<form method="post" action="upload.php" enctype="multipart/form-data">
  <input name='uploads[]' type="file" multiple>
  <input type="submit" value="Send">
</form>

Note that the "name" of the file input has brackets at the end of it. This isn't required per the spec but is required to process the multiple files.

In PHP, you can then loop through the data as an array:

foreach ($_FILES['uploads']['name'] as $filename) {
    echo '<li>' . $filename . '</li>';
}

Reference URL

Comments

  1. Permalink to comment#

    Very great snippet – thanks for it.

  2. Fabricio Reinert
    Permalink to comment#

    that only work with 3 files? o.0

  3. The brackets are only required if you use PHP in the backend. For Java they are not necessary…

  4. Hung Nguyen

    How about IE?

  5. david
    Permalink to comment#

    how to delete one file of select files?

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".