HTML5 Upload Multiple Files to PHP

HTML5 provides us with the ability to upload multiple files with a single <input> element. While it has been possible to upload several files within one form field, users had to manually select the files one by one. With a few files that may not be an issue, but it will get tedious when uploading a larger number of files. Previously, it has been possible for web developers to implement a similar solution in Flash, but now it can be done natively with HTML5. Here is an example on how to get the <input> element to allow multiple files:

<form action="" method="post" enctype="multipart/form-data">
	<input name="uploads[]" type="file" multiple="multiple">
	<input type="submit" value="Upload!">
</form>

Note the name of the <input> is uploads[], with a bracket. While the bracket is not required for multiple file selection, it is required for PHP to process the files. The following PHP snippet can be used to process the files uploaded using the code above:

<?php
if($_SERVER['REQUEST_METHOD'] == 'POST') {
	foreach($_FILES['uploads']['name'] as $id => $name) {
		rename($_FILES['uploads']['tmp_name'][$id], 'uploads/' . $name);
		echo "<p>$name uploaded successfully!</p>";
	}
}
?>

The PHP script will take all the files uploaded and place them into a folder named ‘uploads’. For it to work, the uploads folder will need to exist already, and needs to be writable by the web server. It’s recommended that you DO NOT use the exact PHP script in a production environment, as it’s dangerous to not check the file being uploaded. You don’t want others uploading a malicious PHP file and executing it on your server.

One thought on “HTML5 Upload Multiple Files to PHP

  1. stum

    Hi,

    Firstly, let me say thanks for this post, I have searched everywhere for something that works and this does. Thanks a lot.

    I used the code above as it’s, and I’m new to php and not sure where to go now to secure it, but I’ll figure that out.

    However I do have a problem, I have code which generates thumbnails and I light box from my image folder, both of which work when I ad images through ftp, though when I upload them with the code above the light box no longer works.
    Do you have any idea why that might be?

Comments are closed.