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 does 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. Also, if you download code (see in download section) you will get all the scripts.
After you create the table, verify if structure is same as above.
Step 3 - Develop a screen to upload and view photos (index.php)
Our upload page will look like below. As soon as one or more photos are uploaded, these photos including previously uploaded photos will be displayed on the right side under view photos. User can select maximum 5 photos at a time to upload. System will give message if more than 5 photos are selected for upload. I have added this just to show that you can limit number of photos to upload at a time. You can change it to any value you want. User can also delete a photo from right side by clicking on 'x' button on top right corner of a photo. Also, user can click on a photo and view larger size of the photo in a modal.
As soon as photos are selected, preview of the selected photos will be displayed just above "Upload Photo" button.
Let's see the code for left hand side of the screen to upload and preview photos.
Here, I will use a file input field to select multiple files. Then I will have a space for preview the photos and then an "Upload Photo" button.
previewImage() is called on onChange event of this field. So, when a file is selected, this event will be triggered. Initially, upload button is disabled and when one or more files are selected, it will be enabled.
Now, let's see the code for the right side of the screen which is used to display all uploaded images with option to delete. Here, I am displaying uploaded images from the 'images' table.
In a loop, I am fetching all images and displaying them. See below code:
Image source is the image name from database and the path is the "uploads" folder. During upload, image name is stored in the database and the image file is uploaded in "uploads" folder. Also, see that image is given in a link to display it in a modal when it is clicked. On clicking on delete button,
deleteImage() function is called to delete the image. A modal is defined as below in
Here is the complete code for
Preview Image - Function previewImage()
This function displays the preview of one or more images selected by the user. It checks number of files selected, I have given 5 as the maximum number of files one can select at a time. You can change to any reasonable value. Let's see the code for this function:
Upload button is defined in
index.php with id as "btnUpload" and it is disabled initially. In a loop each image is taken from the array and file name is validated, if validation is passed, image is displayed. Image source is created as an URL using
Function to upload images
Now, let us see what happens when upload button is clicked by the user. Upload button is used to upload the photos in the server. We will write a function on onClick event of this button. This function executes an Ajax script to run a php program (
process_image.php) with the input files as parameter to upload the photos. Let's see the Ajax code:
An instance of
FormData() is created and adding the input image files in form_data. Then executing an Ajax script with the form_data as one of the parameters. Let's see all the parameters in Ajax call below:
- 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, I am writing response message about upload. I am writing these messages just below the upload button. Also, upload button is disabled and image previews are removed. Function
reloadImages() refreshes the images displayed on the right side of the screen.
- error: In case of any error, we just need to print the error message.
I need to explain two things here, one -
process_image.php uploads, deletes images and also displays images. Let us see upload section of
mysqli autocommit is set as false, because there will a database insert for each image as well as an upload of the image file to the server. Both these functions should complete successfully, if one fails we do not want other to complete. So, we can rollback if upload fails and commit if upload is a success.
If validations are successful, we insert the image file name with date in database table 'images'. If database insert is successful, I upload the file using
move_uploaded_file() php function.
Hope you understood the upload image function using Ajax.
This function is used to refresh image list displayed on the right side of the screen. Below is the screenshot of the images displayed after uploading. I have already explained in
index.php about how these are displayed on the right side of the screen. Now let's see how the list is refreshed using Ajax.
You can see this is also an Ajax call and calling the same php program
process_image.php. See data parameter where I am sending reload as true.
Now let's look at the code in
process_image.php, used in above Ajax call, that reloads the images.
Note that it is the same code written in
This function is called when user clicks on delete (x -button) button from top right corner of an image. Function executes Ajax scripts to run
process_image.php which deletes the image from database as well as removes the image file from the server folder ('uploads' in our case). Below is the code for this function.
After an image is deleted,
reloadImages() function is called to refresh all images. Let's see the code for delete section of
To display image in modal when user clicks on the image, below script is written in
I have given complete code of
process_image.php below. There is a download section later in this topic, if you download the zip file, you will get all the scripts for this topic.