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">

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


  1. Banago
    Permalink to comment#

    Very great snippet – thanks for it.

  2. Fabricio Reinert
    Permalink to comment#

    that only work with 3 files? o.0

    • DonTermi
      Permalink to comment#

      and in Chrome it works too.

    • tresorunikin
      Permalink to comment#

      Fabricio Reinert : CHECK YOUR php.ini FILE, or use the function max_file_uploads() to set the value higher than 3…

  3. ridcully
    Permalink to comment#

    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?

  6. Coach
    Permalink to comment#

    Uninstall IE now.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.