Allow User to Upload Images to Database
Server-side file upload tin exist hands implemented using PHP. There are various ways available to upload image to server and display images on the webpage. Generally, in a dynamic web awarding, the uploaded epitome is stored in a directory of the server and the file name is inserted in the database. Later, the images are retrieved from the server based on the file proper name stored in the database and brandish on the web page.
The prototype can be uploaded directly to the database without storing on the server. But it will increment the database size and spider web page load time. So, it's always a good idea to upload images to the server and store file names in the database. In this tutorial, nosotros will show you lot the unabridged process to upload and shop the image 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 volition exist implemented.
- HTML course to upload prototype.
- Upload image to server using PHP.
- Shop file name in the database using PHP and MySQL.
- Retrieve images from the database and brandish in the web page.
Create Datbase Tabular array
To store 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(eleven) NOT Null AUTO_INCREMENT, `file_name` varchar(255) COLLATE utf8_unicode_ci NOT Nil, `uploaded_on` datetime NOT Zilch, `status` enum('i','0') COLLATE utf8_unicode_ci Not NULL DEFAULT 'one', PRIMARY Primal (`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 name ($dbName) as per your MySQL credentials.
<?php
// Database configuration
$dbHost = "localhost" ;
$dbUsername = "root" ;
$dbPassword = "root" ;
$dbName = "codexworld" ; // Create database connectedness
$db = new mysqli ( $dbHost , $dbUsername , $dbPassword , $dbName ); // Check connection
if ( $db -> connect_error ) {
die( "Connection failed: " . $db -> connect_error );
}
?>
Upload Form HTML
Create an HTML grade to permit the user to choose a file they desire to upload. Make certain <form> tag contains the following attributes.
- method="post"
- enctype="multipart/form-information"
As well, make certain <input> tag contains type="file" attribute.
<class activity="upload.php" method="mail" enctype="multipart/form-data"> Select Prototype File to Upload: <input type="file" name="file"> <input type="submit" proper noun="submit" value="Upload"> </form>
The file upload grade will be submitted to the upload.php file to upload prototype to the server.
Upload File to Server and Store in Database (upload.php)
The upload.php file handles the image upload functionality and shows the condition message to the user.
- Include the database configuration file to connect and select the MySQL database.
- Go the file extension using pathinfo() function in PHP and validate the file format to cheque whether the user selects an image file.
- Upload image to server using move_uploaded_file() function in PHP.
- Insert paradigm file proper name in the MySQL database using PHP.
- Upload status 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" ][ "proper name" ])){
// Allow certain file formats
$allowTypes = array( 'jpg' , 'png' , 'jpeg' , 'gif' , 'pdf' );
if( in_array ( $fileType , $allowTypes )){
// Upload file to server
if( move_uploaded_file ( $_FILES [ "file" ][ "tmp_name" ], $targetFilePath )){
// Insert image file proper 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 error uploading your file." ;
}
}else{
$statusMsg = 'Sorry, only JPG, JPEG, PNG, GIF, & PDF files are allowed to upload.' ;
}
}else{
$statusMsg = 'Please select a file to upload.' ;
} // Display condition message
echo $statusMsg ;
?>
Brandish Images from Database
Now we will think the uploaded images from the server based on the file names in the database and display images in the spider web folio.
- 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 ORDER By uploaded_on DESC" );if(
$query -> num_rows > 0 ){
while( $row = $query -> fetch_assoc ()){
$imageURL = 'uploads/' . $row [ "file_name" ];
?> <img src="<?php repeat $imageURL ; ?>" alt="" /> <?php }
}else{ ?> <p>No paradigm(s) found...</p> <?php } ?>
Create Dynamic Prototype Gallery with jQuery, PHP & MySQL
Conclusion
Here we have shown the most effective way to implement image upload functionality on the website. You can easily extend the file upload functionality equally per your requirements. For providing the meliorate user-interface you can integrate the Ajax File Upload functionality.
Upload multiple images using jQuery, Ajax and PHP
Are y'all want to get implementation help, or modify or enhance the functionality of this script? Submit Paid Service Asking
If you lot take any questions virtually this script, submit it to our QA community - Ask Question
Source: https://www.codexworld.com/upload-store-image-file-in-database-using-php-mysql/
0 Response to "Allow User to Upload Images to Database"
ارسال یک نظر