How to Upload Pic and Show It in Table Php
Server-side file upload tin can be easily implemented using PHP. At that place are various ways available to upload image to server and display images on the webpage. Generally, in a dynamic web application, the uploaded paradigm is stored in a directory of the server and the file proper noun is inserted in the database. Later, the images are retrieved from the server based on the file name stored in the database and brandish on the web page.
The epitome can be uploaded directly to the database without storing on the server. But information technology will increase the database size and web folio load time. So, it'due south always a good idea to upload images to the server and store file names in the database. In this tutorial, nosotros will prove you the entire process to upload and shop the epitome file in MySQL database using PHP.
The example code demonstrates the process to implement the file upload functionality in the web application and the following functionality will be implemented.
- HTML grade to upload image.
- Upload paradigm to server using PHP.
- Store file proper noun in the database using PHP and MySQL.
- Retrieve images from the database and brandish in the web folio.
Create Datbase Table
To shop the epitome file name a table need to be created in the database. The following SQL creates an images table with some basic fields in the MySQL database.
CREATE TABLE `images` ( `id` int(11) NOT NULL AUTO_INCREMENT, `file_name` varchar(255) COLLATE utf8_unicode_ci Not Goose egg, `uploaded_on` datetime NOT Goose egg, `status` enum('1','0') COLLATE utf8_unicode_ci Not NULL DEFAULT 'one', Primary KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
Database Configuration (dbConfig.php)
The dbConfig.php file is used to connect and select the MySQL database. Specify the database hostname ($dbHost), username ($dbUsername), password ($dbPassword), and proper name ($dbName) as per your MySQL credentials.
<?php
// Database configuration
$dbHost = "localhost" ;
$dbUsername = "root" ;
$dbPassword = "root" ;
$dbName = "codexworld" ; // Create database connection
$db = new mysqli ( $dbHost , $dbUsername , $dbPassword , $dbName ); // Check connectedness
if ( $db -> connect_error ) {
die( "Connection failed: " . $db -> connect_error );
}
?>
Upload Form HTML
Create an HTML form to allow the user to choose a file they want to upload. Brand certain <grade> tag contains the following attributes.
- method="mail service"
- enctype="multipart/form-data"
Also, make sure <input> tag contains type="file" aspect.
<class action="upload.php" method="post" enctype="multipart/form-data"> Select Image File to Upload: <input type="file" name="file"> <input blazon="submit" name="submit" value="Upload"> </form>
The file upload form volition be submitted to the upload.php file to upload image to the server.
Upload File to Server and Shop in Database (upload.php)
The upload.php file handles the image upload functionality and shows the status bulletin to the user.
- Include the database configuration file to connect and select the MySQL database.
- Get the file extension using pathinfo() function in PHP and validate the file format to check whether the user selects an image file.
- Upload epitome to server using move_uploaded_file() function in PHP.
- Insert image file name in the MySQL database using PHP.
- Upload condition will be shown to the user.
<?php
// Include the database configuration file
include 'dbConfig.php' ;
$statusMsg = '' ; // File upload path
$targetDir = "uploads/" ;
$fileName = basename ( $_FILES [ "file" ][ "name" ]);
$targetFilePath = $targetDir . $fileName ;
$fileType = pathinfo ( $targetFilePath , PATHINFO_EXTENSION );if(isset(
$_POST [ "submit" ]) && !empty( $_FILES [ "file" ][ "name" ])){
// Let certain file formats
$allowTypes = assortment( 'jpg' , 'png' , 'jpeg' , 'gif' , 'pdf' );
if( in_array ( $fileType , $allowTypes )){
// Upload file to server
if( move_uploaded_file ( $_FILES [ "file" ][ "tmp_name" ], $targetFilePath )){
// Insert prototype file name into database
$insert = $db -> query ( "INSERT into images (file_name, uploaded_on) VALUES ('" . $fileName . "', NOW())" );
if( $insert ){
$statusMsg = "The file " . $fileName . " has been uploaded successfully." ;
}else{
$statusMsg = "File upload failed, please try once more." ;
}
}else{
$statusMsg = "Sorry, there was an fault uploading your file." ;
}
}else{
$statusMsg = 'Sorry, simply JPG, JPEG, PNG, GIF, & PDF files are immune to upload.' ;
}
}else{
$statusMsg = 'Please select a file to upload.' ;
} // Display status message
echo $statusMsg ;
?>
Display Images from Database
Now we volition retrieve the uploaded images from the server based on the file names in the database and display images in the web page.
- Include the database configuration file.
- Fetch images from MySQL database using PHP.
- List images from the uploads directory of the server.
<?php
// Include the database configuration file
include 'dbConfig.php' ; // Get images from the database
$query = $db -> query ( "SELECT * FROM images Guild BY uploaded_on DESC" );if(
$query -> num_rows > 0 ){
while( $row = $query -> fetch_assoc ()){
$imageURL = 'uploads/' . $row [ "file_name" ];
?> <img src="<?php echo $imageURL ; ?>" alt="" /> <?php }
}else{ ?> <p>No epitome(southward) constitute...</p> <?php } ?>
Create Dynamic Image Gallery with jQuery, PHP & MySQL
Conclusion
Here we have shown the near effective way to implement epitome upload functionality on the website. You can easily extend the file upload functionality as per your requirements. For providing the better user-interface you can integrate the Ajax File Upload functionality.
Upload multiple images using jQuery, Ajax and PHP
Are yous want to become implementation help, or modify or enhance the functionality of this script? Submit Paid Service Request
If you lot take whatever questions about this script, submit it to our QA customs - Ask Question
Source: https://www.codexworld.com/upload-store-image-file-in-database-using-php-mysql/#:~:text=Get%20the%20file%20extension%20using,be%20shown%20to%20the%20user.