Image upload using php and MySQL database

In this tutorial, we create a form that takes an image and some text. When the user selects an image and enters some text and clicks the submit button, the data is submitted to the server. PHP now grabs the image and saves it in a folder in the project, and then saves the text in the database together with a link pointing to the image in the folder.

Create a database called image_upload and create a table called images with fields:

id - int(11)
image - varchar(100)
image_text - text

ez_ad

Create a file called index.php and page the following code in it (the complete code):

index.php:

<?php
  // Create database connection
  $db = mysqli_connect("localhost", "root", "", "image_upload");

  // Initialize message variable
  $msg = "";

  // If upload button is clicked ...
  if (isset($_POST['upload'])) {
        // Get image name
        $image = $_FILES['image']['name'];
        // Get text
        $image_text = mysqli_real_escape_string($db, $_POST['image_text']);

        // image file directory
        $target = "images/".basename($image);

        $sql = "INSERT INTO images (image, image_text) VALUES ('$image', '$image_text')";
        // execute query
        mysqli_query($db, $sql);

        if (move_uploaded_file($_FILES['image']['tmp_name'], $target)) {
                $msg = "Image uploaded successfully";
        }else{
                $msg = "Failed to upload image";
        }
  }
  $result = mysqli_query($db, "SELECT * FROM images");
?>
<!DOCTYPE html>
<html>
<head>
<title>Image Upload</title>
<style type="text/css">
   #content{
        width: 50%;
        margin: 20px auto;
        border: 1px solid #cbcbcb;
   }
   form{
        width: 50%;
        margin: 20px auto;
   }
   form div{
        margin-top: 5px;
   }
   #img_div{
        width: 80%;
        padding: 5px;
        margin: 15px auto;
        border: 1px solid #cbcbcb;
   }
   #img_div:after{
        content: "";
        display: block;
        clear: both;
   }
   img{
        float: left;
        margin: 5px;
        width: 300px;
        height: 140px;
   }
</style>
</head>
<body>
<div id="content">
  <?php
    while ($row = mysqli_fetch_array($result)) {
      echo "<div id='img_div'>";
        echo "<img src='images/".$row['image']."' >";
        echo "<p>".$row['image_text']."</p>";
      echo "</div>";
    }
  ?>
  <form method="POST" action="index.php" enctype="multipart/form-data">
        <input type="hidden" name="size" value="1000000">
        <div>
          <input type="file" name="image">
        </div>
        <div>
      <textarea 
        id="text" 
        cols="40" 
        rows="4" 
        name="image_text" 
        placeholder="Say something about this image..."></textarea>
        </div>
        <div>
                <button type="submit" name="upload">POST</button>
        </div>
  </form>
</div>
</body>
</html>

And that's all.

Be sure to include the enctype in your form tag. Like this:

<form method="POST" action="index.php" enctype="multipart/form-data">

Without the attribute enctype="multipart/form-data", the image won't be uploaded. enctype is the encoding type that specifies how the form-data should be encoded when submitting the form. Without it file uploads won't work.

Thanks :D

vli_ad