Upload Multiple Images and Store in Database using PHP and MySQL

File upload in PHP is the most used functionality for the web application. A single file or multiple files can be easily uploaded using PHP. PHP provides a quick and simple way to implement server-side file upload functionality. Generally, in the web application, the file is uploaded to the server and the file name is stored in the database. Later the files are retrieved from the server based on the file name stored in the database.

In most cases, a single image is uploaded at once. But sometimes you have a requirement to upload multiple images at once. In this tutorial, we will show you how to upload multiple images in PHP and store the images in the MySQL database. Multiple image upload allows the user to select multiple files at once and upload all files to the server in a single click.

Our example code will implement the following functionality to demonstrate the multiple images upload in PHP.

• HTML form to select multiple images.
• Upload images to the server using PHP.
• Store file names in the database using PHP and MySQL.
• Retrieve images from the database and display on the web page.

Create Database Table

A table needs to be created in the database to store the image file names. The following SQL creates an images table with some basic fields in the MySQL database.

CREATE TABLE `images` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `file_name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
 `uploaded_on` datetime NOT NULL,
 `status` enum('1','0') COLLATE utf8_unicode_ci NOT NULL DEFAULT '1',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Database Configuration (dbConfig.php)

The dbConfig.php file is used to connect and select the MySQL database. Specify the database hostname ($dbHost), username ($dbUsername), password ($dbPassword), and name ($dbName) as per your MySQL credentials.

<?php
// Database configuration
$dbHost     = "localhost";
$dbUsername = "root";
$dbPassword = "root";
$dbName     = "codexworld";

// Create database connection
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);

// Check connection
if ($db->connect_error) {
    die("Connection failed: " . $db->connect_error);
}
?>

File Upload Form HTML

Create an HTML form with an input field to allow the user to select images they want to upload.
The <form> tag must contain the following attributes.

• method="post"
• enctype="multipart/form-data"

The <input> tag must contain type="file" and multiple attributes.

<form action="upload.php" method="post" enctype="multipart/form-data">
    Select Image Files to Upload:
    <input type="file" name="files[]" multiple >
    <input type="submit" name="submit" value="UPLOAD">
</form>

Upload Multiple Files in PHP (upload.php)

The upload.php file handles the multiple image upload functionality and shows the upload status to the user.

• Include the database configuration file to connect and select the MySQL database.
• Get the file extension using pathinfo() function in PHP and check whether the user selects only the image files.
• Upload images to the server using move_uploaded_file() function in PHP.
• Insert image file names in the database using PHP and MySQL.
• Show the upload status to the user.

<?php 
// Include the database configuration file 
include_once 'dbConfig.php'; 
     
if(isset($_POST['submit'])){ 
    // File upload configuration 
    $targetDir = "uploads/"; 
    $allowTypes = array('jpg','png','jpeg','gif'); 
     
    $statusMsg = $errorMsg = $insertValuesSQL = $errorUpload = $errorUploadType = ''; 
    $fileNames = array_filter($_FILES['files']['name']); 
    if(!empty($fileNames)){ 
        foreach($_FILES['files']['name'] as $key=>$val){ 
            // File upload path 
            $fileName = basename($_FILES['files']['name'][$key]); 
            $targetFilePath = $targetDir . $fileName; 
             
            // Check whether file type is valid 
            $fileType = pathinfo($targetFilePath, PATHINFO_EXTENSION); 
            if(in_array($fileType, $allowTypes)){ 
                // Upload file to server 
                if(move_uploaded_file($_FILES["files"]["tmp_name"][$key], $targetFilePath)){ 
                    // Image db insert sql 
                    $insertValuesSQL .= "('".$fileName."', NOW()),"; 
                }else{ 
                    $errorUpload .= $_FILES['files']['name'][$key].' | '; 
                } 
            }else{ 
                $errorUploadType .= $_FILES['files']['name'][$key].' | '; 
            } 
        } 
         
        // Error message 
        $errorUpload = !empty($errorUpload)?'Upload Error: '.trim($errorUpload, ' | '):''; 
        $errorUploadType = !empty($errorUploadType)?'File Type Error: '.trim($errorUploadType, ' | '):''; 
        $errorMsg = !empty($errorUpload)?'<br/>'.$errorUpload.'<br/>'.$errorUploadType:'<br/>'.$errorUploadType; 
         
        if(!empty($insertValuesSQL)){ 
            $insertValuesSQL = trim($insertValuesSQL, ','); 
            // Insert image file name into database 
            $insert = $db->query("INSERT INTO images (file_name, uploaded_on) VALUES $insertValuesSQL"); 
            if($insert){ 
                $statusMsg = "Files are uploaded successfully.".$errorMsg; 
            }else{ 
                $statusMsg = "Sorry, there was an error uploading your file."; 
            } 
        }else{ 
            $statusMsg = "Upload failed! ".$errorMsg; 
        } 
    }else{ 
        $statusMsg = 'Please select a file to upload.'; 
    } 
} 
 
?>

Upload Multiple Files and Images in CodeIgniter

Display Images from Database

Now we will retrieve the file names from the database and display the respective images from the server on the web page.

• Include the database configuration file to connect and select the MySQL database.
• Fetch images from MySQL database using PHP.
• Retrieve images from the server (uploads/) and listed on the web page.

<?php
// Include the database configuration file
include_once 'dbConfig.php';

// Get images from the database
$query = $db->query("SELECT * FROM images ORDER BY id DESC");

if($query->num_rows > 0){
    while($row = $query->fetch_assoc()){
        $imageURL = 'uploads/'.$row["file_name"];
?>
    <img src="<?php echo $imageURL; ?>" alt="" />
<?php }
}else{ ?>
    <p>No image(s) found...</p>
<?php } ?> 

Create Dynamic Image Gallery with jQuery, PHP & MySQL

Conclusion

Here we have shown the easiest way to integrate multiple image upload functionality on the website. This example code also is used to upload multiple files in PHP. You can extend these multiple image upload functionality as per your needs. For user-friendly image upload, you can implement Drag and drop file upload using Dropzone JS and PHP. Alternatively, the Ajax multiple images upload will provide a better user-interface to the website.