How to upload multiple images with preview in PHP, MySQL and jQuery

If you want to upload one or more images with preview and caption using PHP and MySQL, then this topic can guide you. In this topic, we will develop an application using which user can select one or more images, preview selected images and upload them in the server. Also, user can view all uploaded images and delete an image after upload. Using PHP, MySQL and JavaScript/jQuery, we can develop this application.

This topic is for uploading multiple images without using Ajax (Ajax is used here only to delete an image), a similar topic is written for uploading multiple images using PHP and Ajax. You can read the topic How to upload multiple images with preview using Ajax in PHP and MySQL.

Upload multiple images jquery php ajaxAssumption

  1. You must have basic knowledge of PHP, HTML, CSS, JavaScript and jQuery. You can read below topics for more details:
    1. How to install xampp for Windows with setup for PHP development
    2. How to write PHP code with examples for beginners
    3. How to build a simple CRUD application in PHP and MySQL

PHP image upload file size and image type validationFolders and Files

Below is a screenshot of the folder structure and files I am using:

guide to File Upload with PHP and mysql

I have created a folder named 'photos' under 'xampp/htdocs' as I am using XAMPP. If you are using WAMP, create 'photos' folder under 'www'.

  1. Folder 'cfg' - In this folder I have kept dbconnect.php which is used to connect to the MySQL database.
  2. Folder 'css' - Custom stylesheet is in this folder
  3. Folder 'js' - our custom JavaScripts file is in this folder
  4. Folder 'uploads' - All uploaded photos will be stored in this folder
  5. index.php is the screen where user can upload, view and delete photos.
  6. process_image.php is the PHP program that uploads, deletes, displays photos.

Below is the screenshot of the page when 5 photos were uploaded:

Upload image using mysql php

Step 1 - Create a table in MySQL database to store image files

Let us create a table named 'images' in MySQL database. I have a database called 'demo'. So, this table will be created in demo database. If you have an existing database other than demo you can also use it. Just make sure same table do not exist already. Table structure and create table scripts are given below:

Table: images

This table stores image names and image filenames of all uploaded images

Upload multiple image using PHP, mysql and jQuery

Table has 3 columns.

  1. id - Unique id of each image, it is the primary key and auto incremented
  2. image_name - Image name entered by the user while uploading
  3. image_file - File name of uploaded image
  4. upload_dt - Date on which image was uploaded
Create table script for this table is given below, you can use this code to create the table. Also, you can download the code from the download section later in this topic.

images.sql

Step 2 - Connect to MySQL database (dbconnect.php)

Use below script to connect to the database. Note that we have this database connection php program in 'cfg' folder. This is written once and used in every program where database connection is needed. This will be easy for maintenance and also will enable reusability of the code.

dbconnect.php

I am using mysqli_connect() function which needs 4 parameters.

  1. server - in our case it is localhost
  2. userid - we are using root user
  3. password - no password for user root
  4. database name - demo in our case.

For detail database connection understanding please read topic How to Connect to MySQL database in PHP using mysqli_connect.

Step 3 - Develop a page to upload and view images (index.php)

This page will give admin option to select one or more images (max 5), admin can enter name for each photo, preview them and upload them. Once images are uploaded, those will be displayed as thumbnails and admin can click on any images to view larger size of the images. Also, admin can delete any images from the list.

Upload multiple Images into Database and Display it using php

Name of each uploaded image will be unique, uploaded image name will be the caption entered for the image with extension from original image file. Image validation is done in process_images.php program.

Form to upload images

We will use a 5 input file fields to select 5 image files and 5 input text fields to enter caption for each image. There will be a space for previewing the image next to each input image field.

We have used a PHP loop to write the input fields. So, if you want to increase number of images from 5 to 10, you just need to change the counter from 5 to 10 in the for-loop. A JavaScript function previewImage() is called on onChange event of the input file. Note the ids of file input fields and image previews. As we are writing in a loop, so ids will be as image1, image2, image3... for image files. Similarly, for previewing, they will be imgPrvw1, imgPrvw2, imgPrvw3 etc.

Display uploaded images

After upload is done, uploaded images will be displayed just below the form. Here, I am displaying uploaded images after selecting from the images table.

Upload folder in the server is set as "uploads/". All image names are selected from database table, named 'images'. Then in a loop, we are fetching all images and displaying them.

Modal to display the image, is defined as below in index.php, we are using Bootstrap modal here:

Here is the complete code for index.php:

index.php

process_images.php will be executed when form is submitted with valid data.

Step 4 - Write JavaScript/jQuery to preview images and validate form input(image_scripts.js)

Let us now see the JavaScript functions in image_scripts.js file.

Preview Image - Function ImagePreview()

Note the parameters to this function. First parameter is the file object itself; second parameter is the id of the div where image preview will be shown and third one is the id of the input image file.

For each image, this preview function will be called with different parameters as the ids are dynamic.

Delete a Preview - Function removeItem()

This function is called when user clicks on 'x' button on the image preview. This function takes two parameters, id of the image preview and id of the image file input. See below code:

Below is the code for removeItem() function written in image_scripts.js

Function to validate form data

We will check if an image and corresponding caption are given for at least one image before allowing form submission. validateForm() JavaScript function is called when form is submitted. If any image is selected without caption and form is submitted, then that image will be ignored. Let's see the code for this function:

It gets the values of all image files and captions in two arrays. Then in a loop it checks if values are not empty for both image and caption. If at least one row is found for which both image file and caption are having non-empty values, it exits loop with $valid flag as true.

Step 5 - Write PHP code to upload photo (process_images.php)

When Upload button is clicked, form validation is done first. If validation is successful, process_images.php will execute to upload the images in the server and update database table. Let's see the code:

process_images.php

It processes each image file in a loop, validates image type and size, then uploads the file. If upload is successful then it inserts the image name, file name and date of upload in a database table called 'images'. If database insert fails it removes the uploaded photo using unlink() function.

Step 6 - Scripts to view/delete an uploaded image (image_scripts.js)

View a image in modal

User can click on a image to view it and also user can delete a particular image by clicking on 'x' button displayed on the top right corner of the image. To view the image in the modal, a modal is already defined in index.php. Using jQuery image is displayed in the modal. See the below code from image_scripts.js

Delete an uploaded image - Function deleteImage()

This function is called when user clicks on delete (x) button from top right corner of an image. This function is called with two parameters, one is image file name and other is the image name. Function executes Ajax scripts to run process_images.php which deletes the image from database as well as from the server folder. After deletion, it reloads the image list. Below is the code for this function.

Here, an Ajax request is placed to run process_images.php. Note that data parameter of Ajax scripts, it sends image file name and a flag for delete to process_images.php.

Let's see the code for delete section of process_images.php.

If delete flag is set, it deletes the image from database table. unlink() php function is used to delete the uploaded file from 'uploads' folder. Once file is removed from server, all images are refreshed.

Complete code of image_scripts.js and process_images.php are given below. There is a download section, if you download the zip file, you will get all the scripts for this topic.

image_scripts.js

process_images.php

Step 7 - Add CSS (style.css)

We need to add some styles. Very simple and basic styles are used here. You can always add better styles. I have already added style.css in index.php. See below:

style.css

Upload multiple images in PHP and MySQLTest the Application

Make sure in your XAMPP control panel Apache and MySQL services are running. Open the browser and run localhost/photos. You will see the home page as displayed below:

multiple image preview in jquery

By clicking on "Select Image" buttons, select few images and see if you are able to see the preview of the images. Give name for each image selected. Click Upload button. Images will be uploaded and you should see them on the listed below Upload button with the name of each images. Click on any image, it should open in a modal. Also delete an images and see the list is refreshed.

Hope you could understand all the steps and you could test it successfully.

upload multiple image in phpImportant Note

  1. For uploading images, you must verify below parameters in php.ini file. You must set file_uploads parameter to "On" in your php.ini. Also review the parameter upload_max_filesize and max_file_uploads. If you restrict file size during upload, make sure the size is less than the size mentioned in php.ini file. Below are the values set for these parameters in my php.ini

  2. We have given option for 5 input images, since input fields are created using a loop, you can change the loop count anytime to increase or decrease number of input images.
  3. In this application, images are selected one at a time, because a caption must be entered for each photo before upload. This will be applicable where you want to upload more than one image and give a name for each image, for example, products or items. We have developed a similar application for uploading multiple images using PHP and Ajax without giving a name for each photo, but you can select multiple images all at once and upload them. You can read the topic How to upload multiple images with preview using Ajax in PHP and MySQL.

upload and display multiple images in php source codeDownload Source Code

I have put all codes in a zip file. You can download it by clicking on the Download button below. You do not need to register yourself to download it. You can directly use the code or you can modify them as per your requirements.

Multiple image upload with previewConclusion

In this topic, I have given one text input field for each image, you can add more fields if you want. As I was saying about a product or an item, you can have more than one image for a product and each image can have a name along with some other details. Even for an image gallery, you can develop similar type of application.

If you find it useful, you can use it in your project or any other web application with similar requirement.