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:
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:
Table has 4 columns.
id - It is the unique id of a user, primary key and auto incremented
name - Name of the user
email - email of the user
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.
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.
I am using mysqli_connect() function which needs 4 parameters.
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.
Let's see the code for index.php below:
upload_photo.php is include in the above code. This program is used to validate and upload the image.
Preview Photo - Function previewPhoto()
Function previewPhoto() takes the input image file as parameter. Let's see the code for this function:
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:
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:
Test 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:
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.
For uploading images, you must verify below parameters in php.ini file. Below are the values set for these parameters in my php.ini
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.
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.
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.