Upload multiple files at once with HTML5, jQuery and PHP

In today’s modern web applications, uploading files to the server is a very common feature, however it is often the case that your application must allow multiple file uploads to the server. Today we will build a form that will allow the user to upload multiple files to the server at once using HTML5, jQuery and PHP. Let us being …

The HTML

Nothing too fancy here, but do pay attention to the multipart attribute on the input element of type of file. This essentially tells the application to expect multiple files instead of a maximum of one.

Note also the scripts at the bottom of the html markup. You will need the jQuery library and some jQuery code which will come later. This will sit in the custom.js file.

PHP Code

Next comes the PHP code. In your favorite code editor program (I used Sublime Text 3 for this) create a new file and call it file-upload.php. In there we simply loop through the $_FILES array given to us by PHP and for each entry we do what needs to be done!

jQuery custom code

We will handle the submitting of the form via jQuery, we will also handle what exactly gets sent. Let us being by creating a file named custom.js and inside we will place the following code:

Note that we make use of HTML5’s FormData, so this will not work on older browsers. Always check caniuse.com for browser compatibilities.

In the HTML, ensure the referenced paths to the ‘custom.js’ file is correct. In my case, I have my custom.js file sitting inside a folder called js. I also have my ‘file-upload.php’ sitting next to my html file.

That is it! We are done. You now have a file input that can handle the upload of multiple files are once.

Note: If you are developing on your local machine and you’re using WAMP or XAMP, there are certain restrictions set in the php.ini file. These basically limit the size of the files to be uploaded and also how much time is allowed for a file to be uploaded. If you plan on uploading big files, ensure you update those settings to meet your need.