Image upload using php and MySQL database

332 people views this

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

Example

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):

Example

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

Example

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

Suggest Improvement or Contribute on this article

Check out these related:

Leave comment

Comments (1)

Image upload using php and MySQL database

Example

Example

Example

Check out these related:

Leave comment

// SEARCH

// SUBSCRIBE

// SUBSCRIBE

// CATEGORIES

Suggest for Improvement

Image upload using php and MySQL database

Example

Example

Example

Check out these related:

Leave comment

// SEARCH

// SUBSCRIBE

// SUBSCRIBE

// CATEGORIES