Black Friday sale is now on! 50% off Laravel: The Modular Way. Learn more

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

David Carr

PHP & MySQL Tutorials

  • Full Script
  • 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>

     

    Laravel Modules Book by David Carr

    Help support the blog so that I can continue creating new content!

    Subscribe to my newsletter

    Subscribe and get my books and product announcements.

    © 2009 - 2022 DC Blog. All code MIT license. All rights reserved.