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.
Assumption
You must have basic knowledge of PHP, HTML, CSS, JavaScript/jQuery.You can read below topics for more details:
Step 1 - Create a table in MySQL database to store photos
Create a table named 'user_profile' in MySQL database. This table will have user details, like name, email, photo etc. Table structure is given below:
Table has 4 columns.
id - It is the unique id, 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.
user_profile.sql
CREATE TABLE `user_profile` (
`id` int(11) NOT NULL,
`name` varchar(255) NOT NULL,
`email` varchar(255) NOT NULL,
`image` varchar(500) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
ALTER TABLE `user_profile`
ADD PRIMARY KEY (`id`);
ALTER TABLE `user_profile`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;
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. We will include this in other programs where we need database connection.
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 will be inserted in user_profile table with details of user and the image file will be uploaded in the server.
upload_photo.php is included 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
// function to preview photo
function previewPhoto(input) {
var regex = /^([a-zA-Z0-9\_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
if (input.files && input.files[0]) {
var image = input.files[0];
if (regex.test(image.name.toLowerCase())) {
var reader = new FileReader();
reader.onload = function (e) {
$("#prvwPhoto").attr({'src':e.target.result,'width':'120','height':'100','title':input.files[0].name,'alt':'Profile Photo'});
};
reader.readAsDataURL(input.files[0]);
$("#imgErr").html("");
}
else {
alert(image.name + " is not a valid image file.");
return false;
}
}
}
Image file extension must be only jpg, jpeg, gif, png and bmp. We are validating the image file name and then showing the preview.
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
<?php
// report all errors except E_NOTICE
error_reporting(E_ALL & ~E_NOTICE);
include "cfg/dbconnect.php";
$upload_path = "uploads/";
$valid = true;
if (isset($_POST['submit'])) {
$name = trim($_POST['name']);
$email = trim($_POST['email']);
$photo = $_FILES["photo"]["name"];
// validate fields
if (empty($name)) {
$name_err = "Name is required";
$valid = false;
}
if (empty($email)) {
$email_err = "Email is required";
$valid = false;
}
elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)){
$email_err = "Not a valid email address";
$valid = false;
}
else {
// check if email already exists
$sql = "select * from user_profile where email = '$email'";
$rs = mysqli_query($conn,$sql);
if (mysqli_num_rows($rs) >0) {
$email_err = "Email id already registered.";
$valid = false;
}
}
if (empty($photo)) {
$photo_err = "Photo is required";
$valid = false;
}
else
{
$file_name = basename($_FILES["photo"]["name"]);
$tmp_file = $_FILES["photo"]["tmp_name"];
$image_name = time()."_".$file_name;
$target_file = $upload_path.$image_name;
$imageType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
// check file extension
if($imageType != "jpg" && $imageType != "png" && $imageType != "jpeg"
&& $imageType != "gif" && $imageType != "bmp") {
$photo_err = "Error: Invalid file type";
$valid = false;
}
//check if it is an image
if(exif_imagetype($tmp_file) != IMAGETYPE_GIF && exif_imagetype($tmp_file) != IMAGETYPE_JPEG && exif_imagetype($tmp_file) != IMAGETYPE_PNG && exif_imagetype($tmp_file) != IMAGETYPE_BMP) {
$photo_err = "Error: File is not an Image file";
$valid = false;
}
// Check file size, max 2M
if ($_FILES["photo"]["size"] > 2000000) {
$photo_err = "Error: Image size exceeds 2MB";
$valid = false;
}
}
// if all validations are sucecssful, upload photo and insert into table
if ($valid) {
if (!move_uploaded_file($tmp_file, $target_file)) {
$msg = "Error: There was an error uploading photo.";
}
else { // upload photo is successful, insert row in database
$insert = "insert into user_profile (name, email, image) values ('$name','$email','$image_name')";
$result = mysqli_query($conn,$insert);
if(!$result) { // database insert fails, delete uploaded photo
if (file_exists($target_file)){
unlink($target_file);
$msg = "Error in submission. Please contact Admin";
}
}
else { // all success
$msg = "Your Registration completed successfully";
$name = $email = "";
}
}
}
}
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:
In XAMPP control panel Apache and MySQL services should be 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.
Important 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
; Whether to allow HTTP file uploads.
; http://php.net/file-uploads
file_uploads=On
; Maximum allowed size for uploaded files.
; http://php.net/upload-max-filesize
upload_max_filesize=2M
; Maximum number of files that can be uploaded via a single request
max_file_uploads=20
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
Conclusion
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.
Assumption
Folders and Files
Development Steps
Test the Application
Important Note
Download Source Code
Conclusion