Upload Image to server or database using php -

Another interesting article on that how to insert or store an image or any file (pdf preferably) into a database or at server location.

Let’s begin!

First need to create an HTML File uploading image

save file as upload.html

<hhtml>
<head>  

<title> Upload files to server </title> 
<style> 
#tab{background-image: linear-gradient(to right, white, lightgreen); border: solid; border-color: darkorange; border-radius: 5px}


#hd{background-image: linear-gradient(to right, teal, lightgreen); border: solid; border-color: darkorange; border-radius: 5px; color: white; text-shadow: 2px 2px darkgreen; font-family: monospace;}


body{
    background-image: linear-gradient(to right, lightgreen, white); border: solid; border-color: darkorange; border-radius: 5px}
}


</style>
</head>  


    <body> <center>
        <h1 id='hd'> Upload Images to Server </h1> <hr>
<form action="upload.php" method="post" enctype="multipart/form-data">
    Select Image File to Upload:
    <input type="file" name="file">
    <input type="submit" name="submit" value="Upload">
</form>
<br><br>
<hr>
<a href="http://localhost/demo/imgdb/display.php"> View Images </a>

</body>
</html>

Output looks as following

Now, create a table in your existing or new database as following.

Now create database configuration file called “db.php” as following code

<?php
// Database configuration to connect mysql
$dbHost     = "localhost";
$dbUsername = "root";
$dbPassword = "";
$dbName     = "college_db";
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
if ($db->connect_error) {
    die("Connection failed: " . $db->connect_error);
}
?>

Now create upload.php for uploading file to server

<html>
<head>  

<title> Upload files to server </title> 
<style> 
#tab{background-image: linear-gradient(to right, white, lightgreen); border: solid; border-color: darkorange; border-radius: 5px}


#hd{background-image: linear-gradient(to right, teal, lightgreen); border: solid; border-color: darkorange; border-radius: 5px; color: white; text-shadow: 2px 2px darkgreen; font-family: monospace;}


body{
    background-image: linear-gradient(to right, lightgreen, white); border: solid; border-color: darkorange; border-radius: 5px}
}


</style>
</head>  

<body>

<?php
// Include the database configuration file
include 'db.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"])){
    // 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 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 again.";
            } 
        }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 status message
echo $statusMsg;
?>
</body>

<br><br>
<hr>
<a href="http://localhost/demo/imgdb/display.php"> View Images </a>
</html>

Output looks as following

Note: also create “uploads” folder in your current working directory

Now, create display.php to view all images which you have uploaded.

<html>
<head>  
<title> Image Gallery </title> 
<style> 
#tab{background-image: linear-gradient(to right, white, lightgreen); border: solid; border-color: darkorange; border-radius: 5px}


#hd{background-image: linear-gradient(to right, teal, lightgreen); border: solid; border-color: darkorange; border-radius: 5px; color: white; text-shadow: 2px 2px darkgreen; font-family: monospace;}

body{
    background-image: linear-gradient(to right, lightgreen, white); border: solid; border-color: darkorange; border-radius: 5px}
}

</style>
</head>  
<body>
<center><h1 id='hd'> Image Gallery </h1> <hr>
<?php
// Include the database configuration file
include 'db.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 echo $imageURL; ?>" alt="" width="100" height="100"/>
<?php }
}else{ ?>
    <p>No image(s) found...</p>
<?php } ?>

<br><a href="http://localhost/demo/imgdb/upload.html">Back to Upload Images </a>

</body></html>

Finally, see the output of your gallery page of all images which are uploaded into server / database location.

Related Posts