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.