HTML Input Multiple Files with PHP and HTML5

This tutorial will help you in Uploading Multiple Files to Server Using HTML5 and PHP. You must have seen many scripts for uploading zip files or uploading single file of any extension. But this HTML5 and PHP based HTML Input Files Multiple script will let you do the following: Multiple Files, Multiple Folders, Single File, Single Folder.

 

How to Upload Multiple Files or Folders with HTML and PHP

Note: We are using webkitdirectory for selecting mass files/folders. So this will work only with up-to-date webkit browsers. I tested on chrome and it worked as expected.

For enabling File Upload using HTML, we will have to add an attribute enctype to our FORM HTML Tag like this:

Now we want to enable functionality of selecting multiple files or folders in browsers. For this, we will add an attribute multiple to our input field in HTML. And for permitting the user to select a folder, we will add an attribute directory to our input field. You can see an example below:

Input Field:


In above input field, we used Input Type: File for telling the browser that it is a File Upload field.

Next is the complete HTML part which will do our work for Selecting Multiple Folders / Files. Here is the example:

Multi-Part HTML Form:


The above example will display two fields:

  1. Text Field for inputting any text for anything you want.
  2. Upload button, which will open a window for selecting your files which you are going to upload.

Our HTML Part has completed. Now let’s move towards the PHP script which will save the files coming from our FORM through a POST data.

PHP:


Below is the code which will receive the uploaded files from our Form and will upload to our Server.

The above script checked if the files are coming using POST method. This is a security measure. Then, it started Uploading Files one by one. If you Select a Folder, then it will grab all the files inside that folder and will upload them one by one to a specified folder in your server. In this script we have used a folder named Upload in which all selected files will be stored. Moreover i have given the option for customizing the folder name as per your needs.

Note: You must give 777 Permissions to the Folder in which you are uploading the files in the server.

Alright, we have done with HTML and PHP. Now we will see the combined version of the above code.

Complete Code:


Here i have combined the whole script which is ready to use. You will just need to copy and paste it into the page to see it working. Have a look below:

I also included some CSS Styling in the above code for making it a little beautiful.

If you don’t want to use the Title Input Field in the above code, you can remove it no problem. We are not using any data in our PHP Code from that field.

One Reply to “HTML Input Multiple Files with PHP and HTML5”

  1. Jim says:

    Can you tell me what the kl_virtual_keyboard_secure_input=”on” does?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

scroll to top