How to Upload Images into MySQL Database and Display it using PHP

🎬 Watch the Tutorial Video Here:

In today’s world, putting images on websites is important. If you want to do it using PHP and MySQL, this guide is for you. We’ll take it step by step

Why Put Images in MySQL?

MySQL is like a storage space for websites. It’s good for keeping things organized and safe. Sometimes, it’s handy to keep images there too, especially if you need to keep track of them really well.

What You Need

First, make sure you have:

A web server that knows PHP (like Apache or Nginx)
MySQL installed on your computer
Basic knowledge of HTML, PHP, and MySQL

Step 1: Making the Database Ready

Let’s start by making a place in MySQL to store our images. We’ll create a special table for this. If you’re using a tool like phpMyAdmin, you can copy and paste this code there:

    
     CREATE TABLE images (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100),
    filename VARCHAR(255)
);

This table is like a box with three sections: one for the image’s ID, one for its name, and one for the filename.

Step 2: Making the Upload Form

Now, let’s make a form in HTML where people can upload images. Here’s the code for that:

    
     <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Upload</title>
</head>
<body data-rsssl=1>
    <h2>Upload an Image</h2>
    <form action="upload.php" method="post" enctype="multipart/form-data">
        <input type="file" name="image">
        <input type="submit" name="submit" value="Upload">
    </form>
</body>
</html>

Step 3: Making the Image Go into the Database

When someone uploads an image, we need PHP to catch it and put its filename in the database. Here’s how we do it:

    
     <?php
if(isset($_POST['submit'])){
    $imageName = $_FILES['image']['name'];
    $imageTmpName = $_FILES['image']['tmp_name'];
    
    // Connecting to MySQL
    $conn = new mysqli("localhost", "username", "password", "database");

    // Checking connection
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }

    // Saving the image to a folder
    $uploadDir = "uploads/";
    $uploadedImage = $uploadDir . basename($imageName);
    move_uploaded_file($imageTmpName, $uploadedImage);

    // Preparing the query
    $stmt = $conn->prepare("INSERT INTO images (name, filename) VALUES (?, ?)");
    $stmt->bind_param("ss", $imageName, $uploadedImage);
    $stmt->execute();
    
    echo "Image uploaded successfully.";
    
    // Closing the connection
    $stmt->close();
    $conn->close();
}
?>

Step 4: Showing the Images on a Webpage

Lastly, we want to show those images on a webpage. Here’s how to do it:

    
     <?php
// Connecting to MySQL
$conn = new mysqli("localhost", "username", "password", "database");

// Checking connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Getting images from the database
$result = $conn->query("SELECT * FROM images");

echo "<h2>Uploaded Images</h2>";
while($row = $result->fetch_assoc()) {
    echo '<img decoding="async" src="'.$row['filename'].'" alt="'.$row['name'].'"/>';
}

// Closing the connection
$conn->close();
?>

You’ve learned how to add images to a MySQL database and show them on a webpage using PHP. It’s a neat trick that can make your websites more interesting. Keep practicing, and you’ll get even better at it!

AUZ Tutorials