Create an Upload Folder for Images Php
This is a stride by step PHP 8 file uploading and storing tutorial. In this tutorial, nosotros will learn how to upload files and images in MySQL Database. and how to implement file upload validation before sending information technology to a web server.
The Internet has never been a secure place; an army of malicious hackers may accept advantage of your code that can bring astringent damages to your php awarding.
Before uploading the file to the server, we must brand sure the necessary file validation is washed correctly. If we do not consider security factors, we might get into trouble.
PHP 8 File Upload Tutorial Example
- Display image preview earlier uploading
- Place all the uploaded images in a specific folder
- Store images path in the MySQL database
Along with that we will also encompass the following image validation using PHP viii:
- Check if the real image is uploaded
- Allow only specific file extension such as .jpg, .jpeg or .png
- Make certain file size should not exceed 2MB
- Check if the file already exists
Table of Contents
- Getting Started
- Create Database & Table
- Create File Upload Grade
- Display Paradigm Preview
- Database Configuration
- File/Image Upload Validation in PHP
- Complete PHP File Upload Instance
- Determination
Getting Started
Start MAMP or XAMPP, create the post-obit folder and file structure in htdocs directory.
\-- php-file-upload |-- config |--- database.php |-- img_dir |--- image-1 |--- image-two |-- file-upload.php |-- index.php Create Database & Table
Create database `database_name`.
Create `table_name` inside the database.
You can execute the following control to create the table columns to shop the images in the database.
CREATE TABLE `user` ( ` id ` int( xi ) NOT NULL, `file_path` varchar( 255 ) Non Goose egg ) ENGINE =InnoDB DEFAULT CHARSET =utf8; Create File Uploading Form
Create an HTML form that permits our users to select the epitome from their local device the aforementioned image which they want to store onto the server.
The input type should be gear up to file forth with the name property.
Also, define the method="mail service" and enctype="multipart/form-information" tags.
<form activeness = " " method = "mail" enctype = "multipart/course-data" class = "mb-iii" > <h3 class = "text-center mb-v" > Upload File in PHP eight </h3 > <div class = "user-paradigm mb-3 text-center" > <div style = "width: 100px; height: 100px; overflow: hidden; background: #cccccc; margin: 0 auto" > <img src = "..." class = "figure-img img-fluid rounded" id = "imgPlaceholder" alt = " " > </div > </div > <div class = "custom-file" > <input blazon = "file" proper noun = "fileUpload" class = "custom-file-input" id = "chooseFile" > <characterization grade = "custom-file-label" for = "chooseFile" > Select file </label > </div > <push type = "submit" proper noun = "submit" course = "btn btn-main btn-cake mt-four" > Upload File </push > Brandish Paradigm Preview
You tin can testify epitome preview earlier uploading it to the server with the help of jQuery.
Import jQuery CDN link before the endmost trunk tag.
<!-- jQuery --> <script src = "https://code.jquery.com/jquery-3.5.1.slim.min.js" > </script > We take already declared the epitome tag with the bare src="" tag.
<img src = "..." id = "imgPlaceholder" alt = " " > The following part converts the image string and places the base64 url in the HTML img tag when the user selects the image.
Place the following code right later the jQuery CDN script tag.
<script> function readURL ( input ) { if (input.files && input.files[ 0 ] ) { var reader = new FileReader ( ) ; reader. onload = role ( due east ) { $ ( '#imgPlaceholder' ) . attr ( 'src' , e.target.result) ; } // base64 string conversion reader. readAsDataURL (input.files[ 0 ] ) ; } } $ ( "#chooseFile" ) . change ( function ( ) { readURL ( this ) ; } ) ; < /script> 
Database Configuration
Add together following code in config/database.php file to make the PHP connectedness with MySQL database using PDO method.
// config/database.php <?php $hostname = "localhost" ; $username = "root" ; $countersign = "" ; try { $conn = new PDO ( "mysql:host= $hostname ;dbname=php_crud" , $username , $password ) ; // prepare the PDO error mode to exception $conn - > setAttribute ( PDO : : ATTR_ERRMODE , PDO : : ERRMODE_EXCEPTION ) ; //echo "Database connected successfully"; } catch (PDOException $e ) { echo "Database connectedness failed: " . $e - > getMessage ( ) ; } ?> File/Image Upload Validation in PHP viii
Let u.s.a. add together our first validation with the help of the file_exists() PHP method. Display mistake message to the user if he does not select any image.
To address the errors, we set up a $resMessage array with status and message properties. We will display the messages to the user based on the response on the front-end.
if ( ! file_exists ( $_FILES [ "fileUpload" ] [ "tmp_name" ] ) ) { $resMessage = array ( "status" = > "alert-danger" , "bulletin" = > "Select prototype to upload." ) ; } The following code applies the validation that allows specific file blazon such every bit .jpg, jpeg and .png to be uploaded on the server. Yous won't be allowed other file types, and will be displayed error message if you practice and then.
// Get file extension $imageExt = strtolower ( pathinfo ( $target_file , PATHINFO_EXTENSION ) ) ; // Allowed file types $allowd_file_ext = array ( "jpg" , "jpeg" , "png" ) ; else if ( ! in_array ( $imageExt , $allowd_file_ext ) ) { $resMessage = array ( "status" = > "warning-danger" , "message" = > "Allowed file formats .jpg, .jpeg and .png." ) ; } Set upwards image file size limit using the post-obit code. A user tin can non allow more than 2MB size of image to upload.
else if ( $_FILES [ "fileUpload" ] [ "size" ] > 2097152 ) { $resMessage = assortment ( "condition" = > "alert-danger" , "message" = > "File is too large. File size should be less than 2 megabytes." ) ; } The given below code checks if the current file is already uploaded.
else if ( file_exists ( $target_file ) ) { $resMessage = array ( "status" = > "alert-danger" , "message" = > "File already exists." ) ; } Create img_dir binder in the root of your PHP upload file project, here we will store all the uploaded images.
<?php // Database connection include ( "config/database.php" ) ; if ( isset ( $_POST [ "submit" ] ) ) { // Fix image placement binder $target_dir = "img_dir/" ; // Get file path $target_file = $target_dir . basename ( $_FILES [ "fileUpload" ] [ "name" ] ) ; if ( ! file_exists ( $_FILES [ "fileUpload" ] [ "tmp_name" ] ) ) { // Validation goes here } else { if ( move_uploaded_file ( $_FILES [ "fileUpload" ] [ "tmp_name" ] , $target_file ) ) { $sql = "INSERT INTO user (file_path) VALUES (' $target_file ')" ; $stmt = $conn - > prepare ( $sql ) ; if ( $stmt - > execute ( ) ) { $resMessage = array ( "status" = > "alert-success" , "bulletin" = > "Image uploaded successfully." ) ; } } else { $resMessage = assortment ( "status" = > "alert-danger" , "message" = > "Image coudn't exist uploaded." ) ; } } } ?> Consummate PHP 8 File Upload Instance
Complete PHP file upload code example tin be constitute in the file-upload.php file.
// file-upload.php <?php // Database connection include ( "config/database.php" ) ; if ( isset ( $_POST [ "submit" ] ) ) { // Set prototype placement folder $target_dir = "img_dir/" ; // Get file path $target_file = $target_dir . basename ( $_FILES [ "fileUpload" ] [ "proper noun" ] ) ; // Get file extension $imageExt = strtolower ( pathinfo ( $target_file , PATHINFO_EXTENSION ) ) ; // Allowed file types $allowd_file_ext = array ( "jpg" , "jpeg" , "png" ) ; if ( ! file_exists ( $_FILES [ "fileUpload" ] [ "tmp_name" ] ) ) { $resMessage = array ( "status" = > "alert-danger" , "message" = > "Select image to upload." ) ; } else if ( ! in_array ( $imageExt , $allowd_file_ext ) ) { $resMessage = array ( "status" = > "warning-danger" , "bulletin" = > "Immune file formats .jpg, .jpeg and .png." ) ; } else if ( $_FILES [ "fileUpload" ] [ "size" ] > 2097152 ) { $resMessage = array ( "status" = > "alarm-danger" , "bulletin" = > "File is too big. File size should exist less than 2 megabytes." ) ; } else if ( file_exists ( $target_file ) ) { $resMessage = array ( "status" = > "alert-danger" , "message" = > "File already exists." ) ; } else { if ( move_uploaded_file ( $_FILES [ "fileUpload" ] [ "tmp_name" ] , $target_file ) ) { $sql = "INSERT INTO user (file_path) VALUES (' $target_file ')" ; $stmt = $conn - > prepare ( $sql ) ; if ( $stmt - > execute ( ) ) { $resMessage = array ( "condition" = > "alert-success" , "message" = > "Image uploaded successfully." ) ; } } else { $resMessage = assortment ( "condition" = > "alert-danger" , "message" = > "Image coudn't exist uploaded." ) ; } } } ?> Include the file-upload.php in the index.html file here we have divers the file upload form along with the message array.
<?php include ( "file-upload.php" ) ; ?> <! doctype html > <html lang = "en" > <caput > <meta charset = "utf-8" > <meta proper name = "viewport" content = "width=device-width, initial-scale=one, compress-to-fit=no" > <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.five.0/css/bootstrap.min.css" > <title > PHP 8 Paradigm Upload Example </title > <style > .container { max-width: 450px; } </style > </head > <body > <div grade = "container mt-5" > <form action = " " method = "mail service" enctype = "multipart/form-information" class = "mb-three" > <h3 grade = "text-heart mb-v" > Upload File in PHP </h3 > <div class = "user-epitome mb-3 text-center" > <div way = "width: 100px; peak: 100px; overflow: subconscious; background: #cccccc; margin: 0 machine" > <img src = "..." class = "figure-img img-fluid rounded" id = "imgPlaceholder" alt = " " > </div > </div > <div form = "custom-file" > <input blazon = "file" proper name = "fileUpload" grade = "custom-file-input" id = "chooseFile" > <label class = "custom-file-characterization" for = "chooseFile" > Select file </characterization > </div > <button type = "submit" proper noun = "submit" class = "btn btn-primary btn-block mt-4" > Upload File </button > </form > <!-- Display response letters --> <?php if ( ! empty ( $resMessage ) ) { ?> <div class = "alert <?php repeat $resMessage [ 'condition' ] ?> " > <?php repeat $resMessage [ 'bulletin' ] ?> </div > <?php } ?> </div > <!-- jQuery --> <script src = "https://code.jquery.com/jquery-3.5.ane.slim.min.js" > </script > <script > function readURL ( input ) { if (input.files && input.files[ 0 ] ) { var reader = new FileReader ( ) ; reader. onload = function ( e ) { $ ( '#imgPlaceholder' ) . attr ( 'src' , e.target.effect) ; } reader. readAsDataURL (input.files[ 0 ] ) ; // convert to base64 string } } $ ( "#chooseFile" ) . modify ( function ( ) { readURL ( this ) ; } ) ; </script > </torso > </html > Conclusion
We have completed the PHP eight File Upload tutorial, and we learned how to upload and store image using PHP in MySQL database. I hope y'all liked this tutorial.
The complete code of this tutorial can be institute on GitHub.
Recommended Posts:
Source: https://www.positronx.io/php-upload-store-file-image-in-mysql-database/
0 Response to "Create an Upload Folder for Images Php"
Post a Comment