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 .

create simple slider in PHPAssumption

  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

Create an Image Slideshow Using PHP and ajaxFolders and Files

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

Create Dynamic Image Slider with PHP, MySQL and ajax

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

  1. Folder 'cfg' - In this folder we have dbconnect.php which is used to connect to the MySQL database.
  2. Folder 'css' - Custom stylesheet is in this folder
  3. Folder 'js' - In this folder I have custom JavaScripts file
  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 called from Ajax. This PHP program uploads, deletes and displays photos.

Below is the screenshot of the page:

PHP Image Slideshow with jQuery using Multiple images Upload using Ajax

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 images names of all uploaded images

Php slideshow using ajax

Table has 3 columns.

  1. id - Unique id of each image, it is the primary key and auto incremented
  2. image_file - File name of uploaded image
  3. 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.

images.sql

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.

dbconnect.php

We are 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 the 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 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.

Slideshow in php and ajax

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 JavaScript function previewImages() is called on onChange event of input file field. Initially, Upload button is disabled and when one or more files are selected, it is enabled.

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

index.php

Step 4 - Write JavaScript/jQuery to preview, upload and delete images (image_scripts.js)

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

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:

  1. url: process_image.php - Call to php program which uploads the images.
  2. dataType: text - Response of Ajax call is text only
  3. cache: false - We do not want browser to cache
  4. 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
  5. processData: false - This is also for form data, we do not want jQuery to process data before sending it to the server.
  6. data: form_data - input data sent to the request
  7. type:post - Type must be post here for enctype = multipart/form-data
  8. 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.
  9. 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.

Function deleteImage()

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.

image_scripts.js

process_image.php

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:

style.css

upload multiple images and Slideshow in php with exampleTest 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:

create automatic image slider in php

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.

slideshow in php and ajaxImportant Note

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 to upload multiple images for slideshow in php and mysqlDownload 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.

create slideshow in php, mysql and ajaxConclusion

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.