PHP Upload Multiple Files




2.48 K Views | Rishi Kashyap | 1 FOLLOW
    X

    PHP Upload Multiple Files


    0

    HTML5 and PHP allows multiple files upload using single Input element. Most tutorial for uploading multiple files never deals with Internet Explorer due to its lack for HTML5 support. However, there is a workaround thanks to Raymond Camden.

    Adding multiple="multiple" in the file input allows you to select more than one file simply by pressing Ctrl simultaneously, this fails in IE as it does not support HTML5. We can show additional file upload input specially for IE and browsers which does not support "multiple" file uploads using small javascript. I created PHP Upload multiple files demo for this tutorial.

    Simple HTML for uploading multiple files<!-- Do keep the EncType="multipart/form-data" -->
    <form EncType="multipart/form-data" Method="POST" Action="/multiple-file-upload-parse.php" Name="upload-file">

    <ul id="morefile" style="list-style:none;">
    <!-- input file with multiple -->
    <li><input name="allfiles[]" id="allfiles" type="file" multiple="multiple"/></li>
    </ul>
    <!-- An Extra div where "ADD MORE" Button will show in IE -->
    <div id="addbutton"></div>
    <input value="SUBMIT" type="submit" class="btn"/>
    </form>

    <!-- Check and modify the page by javascript -->
    <script type="text/javascript">init();</script>

    Simple Javascript for Internet Explorer and browser not supporting "multiple"<script type="text/javascript">

    //Function to check if multiple file is allowed
    function supportMultiple() {
    var el = document.createElement("input");
    return ("multiple" in el);
    }

    //Function to check and "ADD MORE" Button
    function init(){
    if(!supportMultiple()){addone();
    document.getElementById("addbutton").innerHTML='<input type="button" value="ADD MORE" onclick="addone();"/>';}
    }

    //Function which will add more file input (same name)
    function addone()
    {
    var ul = document.getElementById("morefile");
    var li = document.createElement("li");
    li.innerHTML = '<input name="allfiles[]" type="file"/>';
    ul.appendChild(li);
    }
    </script>

    PHP can easily parse the received files. Please check Uploading multiple files for better understanding. I am using function shared by phpuser at gmail dot com, it eases to understand/parse the received files. //Function to rearrange received array for better understanding
     function reArrayFiles($file_post)
     {
        $file_ary = array();
        $file_count = count($file_post['name']);
        $file_keys = array_keys($file_post);
        for ($i=0; $i<$file_count; $i++) {
        foreach ($file_keys as $key) {$file_ary[$i][$key] = $file_post[$key][$i];}
        }
        return $file_ary;
     }

    if(count($_FILES['allfiles'])) {
    $file_ary = reArrayFiles($_FILES['allfiles']);
    foreach ($file_ary as $file)
    {
    echo"<u>FILE NAME : ".$file['name']."<br/></u>";
    echo"FILE TYPE : ".$file['type']."<br/>";
    echo"FILE SIZE : ".$file['size']."<br/>";
    echo"FILE ERROR : ".$file['error']."<br/><br/>";
    }
    }

    I have tried this on Google Chrome, Firefox and Internet Explorer.

    A word of caution , check following PHP settings :

    1. session.gc_maxlifetime
    2. max_input_time
    3. max_execution_time
    4. upload_max_filesize
    5. post_max_size
    Keep these settings high when Uploading Multiple Files using PHP at once.
    PHP Upload Multiple Files

    Rishi Kashyap | 6 years ago | EDIT | REPLY



      YOU MAY ALSO LIKE
      tags  JAVASCRIPT PHP TUTORIAL