HTML 5 makes it possible to upload multiple files using a single input thanks for a new multiple attribute. The benefit of using HTML 5 as opposed to Javascript or Flash is native support, it works cross browser from Internet Explorer 10, Firefox, Opera, Chrome, and Safari.

Creating the form tag specify the action in this case I'm using the same file so I'll leave it empty, the enctype="multipart/form-data" is needed to tell the browser to expect to receive binary data, and finally tell the form to use post.

<form action="" enctype="multipart/form-data" method="post">

The input for the files will have an attribute of multiple="multiple" this enables uploading of multiple files, give the input a name with [] like uploaded[] this will form an array when processing the form.

     <div>
        <label for='upload'>Add Attachments:</label>
        <input id='upload' name="upload[]" type="file" multiple="multiple" />
    </div>

    <p><input type="submit" name="submit" value="Submit"></p>

To process the form check to see if the form has been submitted.

if(isset($_POST['submit'])){

Next check to make sure their is items in the $_FILES['upload'] array

if(count($_FILES['upload']['name']) > 0){

Loop through the files, set a tmp file path to hold the path to the temp location of the files.

for($i=0; $i<count($_FILES['upload']['name']); $i++) {
    //Get the temp file path
    $tmpFilePath = $_FILES['upload']['tmp_name'][$i];

    //Make sure we have a filepath
    if($tmpFilePath != ""){

Save the filename to a $shortname varible to be used to see the filename, $filePath will hold the full url to the file, to be uploaded into a folder called uploaded. Each file will have the date and time added to the start of the filename this stops any existing files from being overwritten.

//save the filename
$shortname = $_FILES['upload']['name'][$i];

//save the url and the file
$filePath = "/uploaded/" . date('d-m-Y-H-i-s').'-'.$_FILES['upload']['name'][$i];

//Upload the file into the temp dir
if(move_uploaded_file($tmpFilePath, $filePath)) {

    //insert into db 
    //use $shortname for the filename
    //use $filePath for the relative url to the file

}

Full Script

<?php
if(isset($_POST['submit'])){
    if(count($_FILES['upload']['name']) > 0){
        //Loop through each file
        for($i=0; $i<count($_FILES['upload']['name']); $i++) {
          //Get the temp file path
            $tmpFilePath = $_FILES['upload']['tmp_name'][$i];

            //Make sure we have a filepath
            if($tmpFilePath != ""){
            
                //save the filename
                $shortname = $_FILES['upload']['name'][$i];

                //save the url and the file
                $filePath = "uploaded/" . date('d-m-Y-H-i-s').'-'.$_FILES['upload']['name'][$i];

                //Upload the file into the temp dir
                if(move_uploaded_file($tmpFilePath, $filePath)) {

                    $files[] = $shortname;
                    //insert into db 
                    //use $shortname for the filename
                    //use $filePath for the relative url to the file

                }
              }
        }
    }

    //show success message
    echo "<h1>Uploaded:</h1>";    
    if(is_array($files)){
        echo "<ul>";
        foreach($files as $file){
            echo "<li>$file</li>";
        }
        echo "</ul>";
    }
}
?>

<form action="" enctype="multipart/form-data" method="post">

    <div>
        <label for='upload'>Add Attachments:</label>
        <input id='upload' name="upload[]" type="file" multiple="multiple" />
    </div>

    <p><input type="submit" name="submit" value="Submit"></p>

</form>

Upload multiple files with a single input with HTML 5 and PHP

Table of Contents

Full Script