Before, we start want to see a demo?
Follow these steps,
- Html form for image file upload and display as profile picture
- Script for php file upload to the server
- Errors page: to print the errors while uploading the image file to the server
Recommended read, File upload to php server via ajax call
Html form to upload image file and display it as profile picture
I have included the upload.php file here to handle the file uploading. Apart from that this page contains a simple form where user can browse through her files in the file system and upload it. I have made the corners of the uploaded image rounded. If you want to keep it straight and simple reduce the
border-radius
property of the image.
I have included the errors.php
file too to print the errors.
While uploading file to the server, always use html POST method. GET method doesn't work here. And encryption type is
enctype="multipart/form-data
Html form for file upload
<?php include('upload.php')?> <html> <head> <style> #welcome-image img { margin: auto; border-radius: 30px; height: 190px; width: 180px; } </style> </head> <body> <div id="welcome-image"> <img src="<?php echo "profile_pic/" . $newfilename ?>" alt="Upload photo"> <form action="" method="post" enctype="multipart/form-data"> <input type="file" name="fileToUpload" id="fileToUpload"> <p></p> <input type="submit" height="10px" width="40px" value="Upload Image" name="submit"> <p> <?php include_once('errors.php');?> </p> </form> </div> </body> </html>
Also read,
Write php script for file upload
The file start with including the
sessions.php
. The sessions.php file checks that the user is logged in or not, it also retrives the username of the user.
We retrieve the username and save it in $user_check
. We append the username as filename to make sure that always a single copy of the image is stored at the server for any user.
The new filename is set by the line $newfilename = $user_check . '.' . 'jpg';
.
We set the target directory, in which the image file will be stored after uploading,
$target_dir = "profile_pic/";
We also check for the fake image, that is, the image user is uploading is valid or not. After it we check for file size of the image. User can upload a image file more than 50Kb. We only allow for JPG, JPEG, PNG & GIF file type.
Php script for file upload to the server
<?php include('session.php') ?> <?php $errors = array() ; $success = array() ; $newfilename = $user_check . '.' . 'jpg'; $target_dir = "profile_pic/"; $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]); $uploadOk = 1; $imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION)); // Check if image file is a actual image or fake image if(isset($_POST["submit"])) { $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]); if($check !== false) { $uploadOk = 1; } else { array_push($errors, "File is not an image."); $uploadOk = 0; } // Check file size if ($_FILES["fileToUpload"]["size"] > 50000) { array_push($errors, "Sorry, your file is too large.."); $uploadOk = 0; } // Allow certain file formats if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "gif" ) { array_push($errors, "Sorry, only JPG, JPEG, PNG & GIF files are allowed."); $uploadOk = 0; } // Check if file already exists //if (file_exists($target_file)) {array_push($errors, "Sorry, file already exists.");$uploadOk = 0;} // Check if $uploadOk is set to 0 by an error if ($uploadOk == 0) { array_push($errors, "Sorry, your file was not uploaded."); // if everything is ok, try to upload file } else { $temp = explode(".", $_FILES["fileToUpload"]["name"]); $newfilename = $user_check ."profile-picture". '.' . end($temp); if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"],"profile_pic/" . $newfilename)) { array_push($success, "The image has been uploaded successfully. "); } else { array_push($errors, "Sorry, there was an error uploading your file."); } } } ?>
Errors page to print errors while file upload in php
Values which we receive through update user details form is collected at separate variables here. We make a database connection and then check whether username is already registered or not. If it is registered, we update the user details in database, if no such user is found we make a row in the table for new user. Thats all in this page.
upload.php
<?php if (count($errors) > 0) : ?> <div class="error"> <?php foreach ($errors as $error) : ?> <p><?php echo $error ?></p> <?php endforeach ?> </div> <?php endif ?> <?php if (count($success) > 0) : ?> <div class="success"> <?php foreach ($success as $succes) : ?> <p><?php echo $succes ?></p> <?php endforeach ?> </div> <?php endif ?>
If you face any issue while implementing the code, you can contact me. Thanks for patient reading.
If you like this article, share with your friends. It will inspire me to write more.