How to upload multiple images with preview in PHP, MySQL and jQuery
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:
This table stores image names and image filenames of all uploaded images
Table has 3 columns.
id - Unique id of each image, it is the primary key and auto incremented
image_name - Image name entered by the user while uploading
image_file - File name of uploaded image
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.
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.
I am using mysqli_connect() function which needs 4 parameters.
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.
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.
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:
process_images.php will be executed when form is submitted with valid data.
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
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:
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.
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:
Test 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:
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.
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
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.
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.
Download 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.
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.