How to upload multiple images and create image slider in PHP and Ajax
Slideshows or image sliders are used to display different images one after other at a certain interval. Images used in the slideshow can be updated dynamically from time to time with new images. Using PHP, MySQL and Ajax we can upload one or more images with preview and update the slideshow without submitting a form .
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 images names of all uploaded images
Table has 3 columns.
id - Unique id of each image, it is the primary key and auto incremented
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. If you download code (see in download section) you will get all the scripts for this topic.
After you create the table, verify if structure is same as above and one row is inserted in it.
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.
We are using mysqli_connect() function which needs 4 parameters.
Step 3 - Develop a page to upload and view images as slideshow (index.php)
As soon as one or more photos are uploaded, uploaded photos will be displayed on the right side under Upload Images section.
Let's see the code for top section of the screen which is for upload, preview and view uploaded images.
Preview, upload and view uploaded images
A button (x) is displayed to delete the image. On clicking this button, deleteImage() function is called.
Modal to view uploaded images
To view the image after upload, a modal is defined as below in index.php, I am using Bootstrap modal here:
Bootstrap Carousel for slideshow
Here, we added a Bootstrap Carousel and display the images in a loop within the carousel. Note that this slideshow section of the screen can be in your website, so in that case you do not need the refresh it. When user visits the website, automatically slideshow will be available with all the latest uploaded images.
Here is the complete code for index.php
Preview Image - Function previewImage()
This function is called as soon as user selects one or more images. This function displays the preview of one or more images selected by the user.
Function to upload images
Upload button is used to upload the images in the server. It executes an Ajax script to run a php program (process_image.php) with the input files as parameter, this php program uploads the images. Let's see the Ajax code:
url: process_image.php - Call to php program which uploads the images.
dataType: text - Response of Ajax call is text only
cache: false - We do not want browser to cache
contentType: false - Since we are sending form_data with image file as input, we must set contentType as false to use enctype = multipart/form-data
processData: false - This is also for form data, we do not want jQuery to process data before sending it to the server.
data: form_data - input data sent to the request
type:post - Type must be post here for enctype = multipart/form-data
success: When Ajax successfully gets response, upload button is disabled and image previews are removed. These are done in the function under success parameter of Ajax script. Then I am writing the response of Ajax request which displays the images on the right under "Uploaded Images" section.
error: In case of any error, we just need to print the error message.
Let us now see how process_image.php is validating, uploading and then displaying the uploaded images.
Images are processed in a loop. Few validations are done on the image before upload. Images are uploaded using move_uploaded_file() function. It inserts a row in "images" table with image file name and date of upload. If database insert fails, file is removed using unlink() function. Then it proceeds for next image, if any, in the loop.
Once images are uploaded, they are displayed on the right side as thumbnails.
This function is called when user clicks on delete (x) button from top right corner of an image. Function is called with a parameter - image file name. Function executes Ajax scripts to run process_image.php which deletes the image from database as well as from the server folder. Below is the code for this function.
Here, we are making another Ajax call to run process_image.php with a flag for delete. Let's see the code for delete section of process_image.php.
Before deleting the image, it checks for number of images currently existing. If it is more than one, then only it deletes the image. Because, at least one image must be there for the slideshow. If only one image is there, deleted button (x) will not be available.
Display image in Modal
When user clicks on the image a modal is open and below script is written in image_scripts.js.
I have given complete code of image_scripts.js and process_image.php below. There is a download section, if you download the zip file, you will get all the scripts for this topic.
Step 5 - 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/slideshow. You will see the home page as displayed below:
Select few images and check if you are able to see the preview of the images. Then upload the images and see the slideshow.
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 this size is less than the size mentioned in php.ini file. Below are the values set for these parameters in my php.ini
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.
You can use the upload section as an admin activity and the slideshow section can be a displayed in your website dynamically. Every time admin changes the images, slideshow will automatically be updated, you do not need to change the code for the new images.
Hope it will be useful for you, you can use it in your project or any other web application with similar requirement.