We will be creating the following:
- index.php
- upload.php
- uploads folder, remember to set the right permissions on your hosting service if U plan to use this.
- a database named "multi_file_uploader" with a table named "images" and a field named "image". If U don't want to insert the files into a database U can just skip this part.
Start by making a simple form layout, and don't forget the enctype='multipart/form-data'. Keep in mind that with a multiple file uploader you have to change a little bit of the code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transtitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transtitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>HTML 5 | Multi File Uploader</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<form action='upload.php' method='post' enctype='multipart/form-data'>
<input type='file' name='images[]' multiple='multiple' />
<input type='submit' value='Upload' />
</form>
</body>
</html>
As you can see above we have a few differences.
A previous file upload input field would look like :
input type='file' name='image'
With HTML5 this would be :
input type='file' name='images[]' multiple='multiple'
With HTML5 we create an array from our uploaded images. The multiple='multiple' code makes it possible to really select mutliple files at once. Without this it would obviously not select multiple images.
That's it for the upload form.
Now we go on to the upload.php since that is the action the form will perform whenever the submit button is clicked.
Below is the php code:
<?php
// Skip these 2 lines if U do not plan on inserting your images into a database.
mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("multi_file_uploader") or die(mysql_error());
if(isset($_FILES['images'])){
//Here it takes all the images from the array, selects them 1 by 1 with the foreach loop,
and uploads it to the upload location, in this case the uploads folder we created earlier.
foreach($_FILES['images']['tmp_name'] as $key => $temp){
$image = $_FILES['images']['name'][$key]; // get the image name
$location = "uploads/". $image; // location where ur image will be stored at
move_uploaded_file($temp, $location); // move image from temporary location to upload location
// Skip the following line if U do not plan on inserting your images into a database.
mysql_query("INSERT INTO `images` (image) VALUES ('" .$image. "')");
}
// Return back to index.php
header("Location: index.php");
}
?>
And that was it. Your multiple selected images will now be in you uploads folder.
If U have any questions or comments feel free to drop a line below.