How to upload profile photo with preview in a PHP registration form

Adding a profile photo is very common in a user registration form. Using PHP and MySQL we can create a registration form with a profile photo upload. Photo will be uploaded in the server and image file name can be stored in the database along with user details.

In this topic, we will see how we can upload an image with preview and store the image file name in the database using PHP and MySQL. You may use it for profile photo or for any other purposes where you want to upload a single image, like a product or an item. Here, we will create a simple user registration form where users can select his/her photo, preview the photo and upload it.

This topic is for a single image upload, a similar topic is written for multiple images upload where you can select multiple photimagesos and upload them. You can read below topics:

  1. How to upload multiple images with preview in PHP, MySQL and jQuery
  2. How to upload multiple images with preview using Ajax in PHP and MySQL

PHP upload image with previewAssumption

  1. You must have basic knowledge of PHP, HTML, CSS, JavaScript/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

upload image in php and mysql with previewFolders and Files

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

Upload image and save to a folder in php

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

  1. Folder 'cfg' - contains dbconnect.php which is used to connect to the MySQL database.
  2. Folder 'css' - custom stylesheet is in this folder
  3. Folder 'js' - custom JavaScript file is kept here
  4. Folder 'uploads' - uploaded photo will be stored in this folder
  5. index.php is the page to register and upload photo.
  6. upload_photo.php is the PHP program which uploads photo in the server.

Below is the screenshot of the page:

Upload and Store Image in Database using PHP and mysql

Step 1 - Create a table in MySQL database to store photos

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:

File Uploading in PHP

Table has 4 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. image - Image file name of the photo of the user
Create table script for this table is given below, you can use this code to create the table. You can also download it from the download section of this topic.

user_profile.sql

After you create the table, verify if table structure is same as above.

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.

  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 for user registration with photo (index.php)

The registration page is a simple form where user can enter name, email id and select a profile photo. When form is submitted a row wil be inserted in user_profile table with details of user and the image file will be uploaded in the server.

Php upload image to a directory

Let's see the code for index.php below:

index.php

upload_photo.php is include in the above code. This program is used to validate and upload the image.

You can see onChange event is used to call previewPhoto(), a JavaScript function. When a photo is selected this event will be triggered and preview of the photo will be displayed.

Step 4 - Write JavaScript/jQuery to preview photo (preview.js)

Preview Photo - Function previewPhoto()

Function previewPhoto() takes the input image file as parameter. Let's see the code for this function:

preview.js

Image file extension must be only jpg, jpeg, gif, png and bmp.

Step 5 - Write PHP program to upload photo (upload_photo.php)

upload_photo.php will be executed when user submits the form. This program validates all inputs including photo. If all validations are successful, photo is uploaded and a row is inserted in user_profile table. Let's see the code:

upload_photo.php

Set the upload directory in the server as "uploads/" where uploaded photos will be kept. There is a flag used named $valid, this is used for validation purpose.

For photo, there will be some additional validations - file extension, image type, image file size. If all validations are successful, it uploads the image file using move_uploaded_file() PHP function. A row containing name, email_id and image file name is inserted into the database table 'user_profile'. If database insert is not successful, we have to remove uploaded file. That is why we have used unlink() function in line 72 to remove the image file.

Step 6 - 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

Move_uploaded_file() function in phpTest the Application

Make sure in your XAMPP control panel Apache and MySQL services are running. Open the browser and run localhost/upload. You will see the home page as displayed below:

How to upload image in PHP

Enter name, email and select a photo and click on Submit button, Registration should be completed and you should see the message displayed. Verify in the database, see if row is inserted in user_profile table. Also check in 'uploads/' folder, photo should be uploaded.

This completes our development and testing. Hope you could understand all the steps and you could test it successfully.

How to upload and display image in PHPImportant Note

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

  2. You can use maximum allowed file size in your program by looking at the parameter as set in php.ini file. I have used 2M for example purpose, you can set it 4M or 6M or more.

PHP File UploadDownload 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.

Image upload in php with exampleConclusion

This topic was for a single photo upload, a similar topic is written for multiple photos upload where you can select multiple photos and upload them. Please see the related topics below to see more on file upload in php.

Hope I could explain the steps properly. If you find it useful, you can use it in your project or in any other web application with similar requirement.