Image upload using php and MySQL database

Image upload using php and MySQL database

We construct a type in this tutorial that takes up an image and some text. The data will be sent to the server when the user selects an image and enters some text, and clicks the submit button. PHP now captures the image and saves it to a project folder, and then saves the text to the database along with a connection pointing to the picture in the folder.

Create a database called image upload, and create a table with fields called images:

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

or use this code to create table

CREATE TABLE `image_upload` (
  `id` int(11) NOT NULL,
  `image` varchar(100) NOT NULL,
  `image_text` varchar(1000) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

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

<?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.

Make sure to include the enctype in your tag of shape. Like this:

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

The image will not be uploaded without the attribute enctype="multipart/form-data". Enctype is the encoding style that determines how to encode the document-data when sending the form. Uploads of files without it won't work.

Leave comment

Comments (1)

// SEARCH

What are you searching for....?

// SUBSCRIBE

Subscribe to us on youtube for updates of our videos first on youtube.

// SUBSCRIBE

To receive updates on the latest news, tutorials and special offers, subscribe to our email newsletter today!

// CATEGORIES

x
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Privacy Policy That's Fine