How to Upload and display multiple images in PHP

Upload multiple images at once helps to reduce the time taking for uploading a large number of images to the server. It also provides a user-friendly way to upload multiple images to the server at once instead of one-by-one. Multiple image upload functionality is very useful for the dynamic gallery management section on the web application. It is also very useful for product management section where multiple images need to be uploaded for each product.

The multiple images can be uploaded on a single click using PHP. Not only the images but also you can upload data with images to the server using PHP and MySQL. In this tutorial, we will show you how to upload multiple imagesand manage (view, edit, and delete) data with PHP and MySQL.

In the example script, we will implement a gallery management system with multiple images using PHP and MySQL.

  • Fetch the gallery info from the database and list on the webpage.
  • Upload multiple images to the server and add form data to the database.
  • View gallery with multiple images.
  • Edit and update multiple images.
  • Delete gallery and multiple images.

Before getting started, take a look at the files structure of the multiple images upload management script.

Create Database Table

To store the gallery and image files information two tables need to be created in the database.

1. The following SQL creates a gallery table with some basic fields in the MySQL database.

2. The following SQL creates a gallery_images table with parent gallery identifier field (gallery_id) in the MySQL database.

Database Class (DB.class.php)

The DB class handles all the database related operations (connect, insert, update, and delete). Specify the database host ($dbHost), username ($dbUsername), password ($dbPassword), and name ($dbName) as per your MySQL database credentials.

  • __construct() – Connect to the database with PHP and MySQLi Extension.
  • getRows() –
    • Fetch gallery with images from the database based on the specified conditions.
    • If single row requested, gallery data with all the respective images are return. Otherwise, only one image is returned with the gallery data.
  • getImgRow() – Fetch the image data from the database based on the specified ID.
  • insert() – Insert gallery data into the database.
  • insertImage() – Insert gallery images in the database.
  • update() – Update gallery data into the database.
  • delete() – Delete gallery data from the database.
  • deleteImage() – Delete image of the specific gallery from the database.

Bootstrap Library

The Bootstrap 4 library is used to design the table, list, form fields, and links. So, include the CSS file of the Bootstrap library. If you don’t want to use Bootstrap, omit it from include.

Gallery List (index.php)

Initially, all the gallery data is retrieved from the database and listed in a tabular view with the view, add, edit, and delete buttons.

  • The View link allows viewing the images of the gallery.
  • The Add link allows uploading gallery information with multiple images.
  • The Edit link allows to edit gallery info and upload/delete images from the gallery.
  • The Delete link allows deleting gallery and images from the database.
  • The Status badge (Active/Inactive) allows controlling the visibility of the gallery.

Delete Gallery Images via AJAX

In the view.php and addEdit.php files, the image deletes functionality is integrated. The jQuery is used to delete images from the gallery via Ajax.

Include the jQuery library where the gallery images delete functionality is used.

The deleteImage() function initiate AJAX request to delete image from gallery.

  • POST the file ID to the postAction.php file.
  • The specified image is deleted from the database and the element is removed from the web page.

Display Multiple Images with Gallery Info (view.php)

In the view.php file, the gallery information is displayed.

  • All the images from the gallery are listed with the Delete link.
  • Once the Delete button is clicked, deleteImage() function is triggered and the respective image is removed from the gallery through jQuery Ajax using PHP.

Multiple Image Upload and Data Add/Edit Form (addEdit.php)

The addEdit.php file holds the HTML form that allows the user to select multiple image files and provide the gallery name.

  • Initially, the form data is submitted to the PHP script (postAction.php) to upload multiple images and insert form data in the database.
  • If the ID parameter exists on the URL,
    • The existing gallery data will be retrieved from the database.
    • The data is pre-filled in the input fields and images are listed under the file upload field.
    • The data is submitted to the PHP script (postAction.php) to update the existing record in the database and upload new images to the server.

Upload Multiple Images, Add, Edit, and Delete Records (postAction.php)

This file handles the multiple files upload and add, edit, & delete operations using PHP and MySQL.

1. Add / Edit Form Submit:

  • The submitted form data is validated to check the empty field value.
  • The insert() and update() methods of the DB class is used to add/update gallery data in the database.
  • Check and validate the files extension using pathinfo() function in PHP.
  • Upload multiple images to server using move_uploaded_file() function in PHP.
  • Insert the uploaded file names and gallery ID in the database using insertImage() method of the DB class.

2. Inactive Gallery (action_type => block):

  • Update and set the gallery status to 0 in the database.
  • The update() method of the DB class is used to update status field value in the database.

3. Activate Gallery (action_type => unblock):

  • Update and set the gallery status to 1 in the database.
  • The update() method of the DB class is used to update status field value in the database.

4. Delete Gallery (action_type => delete):

  • Delete gallery and images data from the database.
  • Remove images from the directory of the server.
  • The delete() and deleteImage() methods of the DB class is used to delete gallery and images data from the database.

5. Delete Image (action_type => img_delete):

  • Delete image data from the database.
  • Remove image file from the directory of the server.
  • The deleteImage() method of the DB class is used to delete image data from the database.

After the data manipulation, the status is stored in PHP SESSION and redirect to the respective page.

This multiple images upload management script is very useful for dynamic data management section in the web application. This script can be used for many purposes, like products management with multiple images using PHP and MySQL. You can easily enhance the functionality of this script and use in any data management section where multiple image upload functionality is needed.

Share on:

Hello, I am Dharmendra Yadav and I am a Python Developer with experience in web development using Django, Flask, REST API, SQL, MySQL, HTML, CSS, JavaScript, WordPress, Oracle Cloud, AWS and Git. I also write technical articles where I explain web development and Software Engineering. Facebook , Linkedin