How to Upload Multiple Images in PHP
-
Understand Form Action and
$_FILESfor Multiple File Uploads in PHP -
Use
move_uploaded_file()to Upload Multiple Images in PHP
Within our PHP applications, especially user-based applications, from time to time, we might need to upload multiple files at once. And with PHP functions and HTML capabilities, it is very much possible and easy to do.
To make it possible, we need to specify the form action within our HTML file or section depending on how you structure your codebase and then use the built-in functions to process the action.
In this article, we will learn how to upload multiple images in PHP, which gives us context on specifying the files we want from a form input, processing all the user-selected files, and uploading or moving to the required location.
Understand Form Action and $_FILES for Multiple File Uploads in PHP
When a user places any input into an HTML form, we use the POST method to send any input (from text to files) to the server-side where our PHP application resides.
<form method='post' action='' enctype='multipart/form-data'>
The enctype='multipart/form-data' part specifies how the form data will be encoded and is required when we employ file uploading within our form.
For file upload, we need the input type file and a specified name (could be any name you decide), file.
<input type="file" name="file" id="file">
For multiple file upload, we still need the input type file, but now a different specified name, file[], and an added attribute, multiple. The addition of the [] indicates that the input field can process more than one file.
<input type="file" name="files[]" multiple/>
On the server-side, the global variable, $_FILES, is an associative array that contains files uploaded via the HTTP POST method, allowing us to process the file appropriately.
<?php
$_FILES["files"]
Use move_uploaded_file() to Upload Multiple Images in PHP
Now that we understand the basics, we need to upload multiple files. Let’s create the PHP form to upload multiple images.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Image Upload</title>
</head>
<body>
<form method="post" enctype="multipart/form-data" name="formUploadFile">
<label>Select image(s) to upload:</label>
<input type="file" name="files[]" multiple="multiple" />
<input type="submit" value="Upload File" name="imgSubmit" />
</form>
<?php
if (isset($_POST["imgSubmit"])) {
$errors = [];
$uploadedFiles = [];
$extension = array("jpeg", "jpg", "png");
$UploadFolder = "images";
$counter = 0;
foreach ($_FILES["files"]["tmp_name"] as $key => $tmp_name) {
$temp = $_FILES["files"]["tmp_name"][$key];
$name = $_FILES["files"]["name"][$key];
if (empty($temp)) {
break;
}
$counter++;
$UploadOk = true;
$ext = pathinfo($name, PATHINFO_EXTENSION);
if (in_array($ext, $extension) == false) {
$UploadOk = false;
array_push($errors, $name . " isn't an image.");
}
if ($UploadOk == true) {
move_uploaded_file($temp, $UploadFolder . "/" . $name);
array_push($uploadedFiles, $name);
}
}
if ($counter > 0) {
if (count($errors) > 0) {
echo "<b>Errors:</b>";
echo "<br/><ul>";
foreach ($errors as $error) {
echo "<li>" . $error . "</li>";
}
echo "</ul><br/>";
}
if (count($uploadedFiles) > 0) {
echo "<b>Uploaded Files:</b>";
echo "<br/><ul>";
foreach ($uploadedFiles as $fileName) {
echo "<li>" . $fileName . "</li>";
}
echo "</ul><br/>";
echo count($uploadedFiles) . " iamge(s) are successfully uploaded.";
}
} else {
echo "Please, Select image(s) to upload.";
}
}
?>
</body>
</html>
Check if the $_POST[] variable is set using the isset() function, initiate the important variables, and set the extensions we need for the file upload.
if (isset($_POST["imgSubmit"])) {
$errors = [];
$uploadedFiles = [];
$extension = array("jpeg", "jpg", "png");
$UploadFolder = "images";
After, we loop through the multiple images that have been processed through the $_FILES[] variable and then check for the extension using the pathinfo() and if true, we move the images to the specified folder, $UploadFolder using the move_uploaded_file() function, and push the images’ name to the $uploadedFiles variable.
foreach ($_FILES["files"]["tmp_name"] as $key => $tmp_name) {
$temp = $_FILES["files"]["tmp_name"][$key];
$name = $_FILES["files"]["name"][$key];
if (empty($temp)) {
break;
}
$counter++;
$UploadOk = true;
$ext = pathinfo($name, PATHINFO_EXTENSION);
if (in_array($ext, $extension) == false) {
$UploadOk = false;
array_push($errors, $name . " isn't an image.");
}
if ($UploadOk == true) {
move_uploaded_file($temp, $UploadFolder . "/" . $name);
array_push($uploadedFiles, $name);
}
}
Finally, we displayed the errors and uploaded files that exist.
if ($counter > 0) {
if (count($errors) > 0) {
echo "<b>Errors:</b>";
echo "<br/><ul>";
foreach ($errors as $error) {
echo "<li>" . $error . "</li>";
}
echo "</ul><br/>";
}
if (count($uploadedFiles) > 0) {
echo "<b>Uploaded Files:</b>";
echo "<br/><ul>";
foreach ($uploadedFiles as $fileName) {
echo "<li>" . $fileName . "</li>";
}
echo "</ul><br/>";
echo count($uploadedFiles) . " image(s) are successfully uploaded.";
}
} else {
echo "Please, Select image(s) to upload.";
}
The served PHP file to the browser.
Select the images and upload the images.
Then, show uploaded files.
The uploaded images:
If you select a file that’s not an image, it gives the errors.
Olorunfemi is a lover of technology and computers. In addition, I write technology and coding content for developers and hobbyists. When not working, I learn to design, among other things.
LinkedIn