HTML5 Directory Upload Using PHP

HTML5 allows you to upload a complete directory by using directory attribute. This method is more user friendly than any other file uploading method. We can upload a complete directory at a time using this way. At this time, method is working only in Chrome and webkit browsers by using webkitdirectory attribute we can also add mozdirectory attribute for mozila browser support. Here is a simple example to upload directory using PHP.

Live Demo Download Script

HTML FORM

<form method="post" enctype="multipart/form-data">
    <input type="file" name="files[]" id="files" multiple="" directory="" webkitdirectory="" mozdirectory="">
    <input class="button" type="submit" value="Upload" />
</form>

Take a look on the html markup, we need to add box brackets with name attribute. It will collect all files in an array.

PHP

We need to handle uploaded files with php multi upload hander method.

$count = 0;
if ($_SERVER['REQUEST_METHOD'] == 'POST'){
    foreach ($_FILES['files']['name'] as $i => $name) {
        if (strlen($_FILES['files']['name'][$i]) > 1) {
            if (move_uploaded_file($_FILES['files']['tmp_name'][$i], 'upload/'.$name)) {
                $count++;
            }
        }
    }
}

8 comments:

  1. Not working on Internet Explorer!

    ReplyDelete
    Replies
    1. Not really surprising...

      Delete
  2. not working with firefox =(

    ReplyDelete
  3. Do not upload directory structure, only files in folder

    ReplyDelete
  4. code is working very perfectly under chrome but the problem is in mozila it not work

    ReplyDelete

Go to top