How to upload, change and remove profile photo using PHP and Ajax

Adding a profile photo can be done during registration or can be added by the user later. So, here we will use PHP code to show how a user can upload his/her photo, change it or remove the profile photo without submitting a form using PHP, Ajax and jQuery.

The photo will be uploaded to the server and the image file name will be stored in the database. We will add login form and logout to this application just to get user information and update photo based on the user details.

Below is a quick demo of the application.

I have few related topics you might be interested in, please see below:

  1. How to preview and upload a photo without page refresh using Ajax in PHP
  2. How to upload multiple images with preview in PHP, MySQL and jQuery
  3. How to upload multiple images and create image gallery in PHP
  4. How to upload multiple images and create image slider in PHP and Ajax

update profile picture in PHP and 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

Change user profile picture ajax, PHP, mysqlFolders and Files

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

User profile edit in PHP and MYSQL with photo

I have created a folder named 'user' under 'xampp/htdocs' as I am using XAMPP. If you are using WAMP, create 'user' 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' - In this folder I have the custom JavaScripts file
  4. Folder 'uploads' - Uploaded photo will be stored in this folder
  5. index.php is the page to upload the photo. User can upload, view and delete photos in this page.
  6. login.php and logout.php - I have used a login page to update the photo
  7. process_image.php is the PHP program called from Ajax.

Below is the screenshot of the page:

PHP MySQL Set Profile Picture.

Step 1 - Create a table in MySQL database for user profile details

Let us create a table named 'user_profile' in MySQL database. This table will have user details, like name, email, photo etc. 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 is given below:

Updating user profile image in php and ajax

Table has 5 columns.

  1. id - It is the unique id of a user, primary key and auto incremented
  2. name - Name of the user
  3. email - Email of the user
  4. password - User password
  5. image_file - Image file name of the uploaded photo
Create table script with data for this table is given below, you can use this code to create the table. You can also download it from the download section later in this topic.

user_profile.sql

After you create the table, verify if table structure is same as above and a row is inserted in the table.

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.

These four parameters are:

  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 view profile with photo (index.php)

Profile page will have name and email id displayed on the left-hand side. Profile photo will be displayed on the right. See below:

Update user profile with photo in php jQuery and ajax

It first checks if user is logged in, if not, it redirects the user to login page. If user is logged in, it displays name and email of the user. If photo of the user is available, it displays the photo with option to change and delete it. But if no photo is found, it gives a button to upload photo. Let's see the code:

It displays photo with change and delete options if photo is available. Otherwise, it displays option to add photo. Let see the code:

Two JavaScript functions, showUpload() and deleteImage(), are called here for change and delete photo. For preview, it calls previewImage() function. A modal is defined to display the photo in the modal.

Here is the complete code for index.php:

index.php

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

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

Preview Image - Function previewImage()

This function is called as soon as user selects a photo. This function displays the preview of the photo selected by the user.

It takes the input image file, if file type is correct, it uses createObjectURL() function to display the preview. Let's see the code for this function:

Once preview is displayed, Upload button is enabled.

Function to upload photo

Upload button is used to upload the photo in the server. This function takes the input photo and creates the FormData instance. Then executes an Ajax script to run a php program (process_image.php) to upload the photo. Let's see the Ajax code:

Let's see all the parameters in Ajax call below:

  1. url: process_image.php - Call to php program which uploads the photo.
  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 form data sent to the request
  7. type: post - Type must be post here for enctype = multipart/form-data
  8. success: When Ajax is successful, message about upload will be displayed.

    If the image is uploaded successfully, we want to display the image. In this case, we just need to show the output of process_image.php, which will be displaying the image along with change and delete buttons. After this we just hide photo selection input, hide upload button, remove preview photo and remove any message already displayed.

Let us now see how process_image.php uploads photo and updates database. It does few validations on the image file, if all validations are passed, it uploads the photo in the server and then updates user_profile table with image file name.

process_image.php

If upload is successful, database table 'user_profile' is updated with new image file name. If database update is not successful, we have to remove uploaded file. That is why I used unlink() function to remove the uploaded photo.

Function deleteImage()

This function is called when user clicks on delete (x) button next to the photo. The function is called with two parameters - image file name and email. Function executes Ajax scripts to run process_image.php which deletes the image from database as well as from the server. Below is the code written in upload.js for this function.

Here, we are making another Ajax call to run process_image.php. Let's see the code for delete image section of process_image.php.

Function showUpload()

This function is called when user clicks on change photo button. This function simply displays the contents of <div> with class as "select-photo". See below code for this function:

It simply changes the display property of the <div> to block, which means it will be visible now.

Modal to display the Photo

When user clicks on the photo, it is displayed in a modal. A modal is used to display the photo using some JavaScript, name of the photo is the parameter to the modal.

See below JavaScript to display photo in a modal:

I have given complete code of upload.js and 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.

upload.js

process_image.php

Additionally, I have given below the code for login.php and logout.php. Which are necessary for this application. To login, use email id = john@test.com, password = 123.

login.php

logout.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.

style.css

Update user profile with photo in php and ajaxTest the Application

Make sure in your XAMPP control panel Apache and MySQL services are running. Open the browser and run localhost/user. You will see login page, enter email as "john@test.com" and password as "123" to login. You will see the profile page as displayed below:

upload image in php and ajax with preview

Click on "Add a Profile Photo" button, select a photo and see if you are able to see the preview of the photo. Click on upload button, photo will be uploaded and you should see it on the right side. Click on the photo, it should open in a modal. Now try to change and delete the photo.

Our development and testing are completed now. Hope you could understand all the steps and you could test it successfully.

Update user profile with photo in php and ajax codeImportant Note

For uploading images, you must verify below parameters in php.ini file. Below are the values set for these parameters in my php.ini

download source code to upload image in php and ajax with previewDownload 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.

upload profile picture in php and ajaxConclusion

This topic was for a single photo upload, a similar topic is written for multiple photos upload where you can select multiple photos, preview and upload them. Please read the topics in "Related Topics" section below.

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