Home » how to upload image in php and store in database and folder?

how to upload image in php and store in database and folder?

In this image upload in php code with databases article, i make a HTML form that takes user profile an image as well as some users bio text. When the user selects any your profile an image and enters some Bio text and then simply clicks the submit button, the all the users data is submitted to the server side and save MySQL Database. PHP now grabs the image as well as saves it in a folder in the main upload project, and then saves the text in the mysql database together with a link pointing to the image in the profiles folder.

How to Upload Image into Database and Display it using PHP ?

Create a database called users_master and make a mysql table called users profiles with some added fields like as image type, file name, size or many more:

Read Also:  Generate PDF in Laravel 5.8 example

Also Read: Multiple Image Upload using PHP into MYSQL database

  • id – int(11)
  • image – varchar(255)
  • file_imag_name – text

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

profile.php:

  • Make database connection
  • Initialize message variable
  • If upload button is clicked
  • Get image name
  • Get text
  • image file directory
  • execute query

<?php
  $db = mysqli_connect("localhost", "root", "", "users_master");

  $msg = "";

  if (isset($_POST['upload'])) {
  	$image = $_FILES['image']['name'];
  	$file_imag_name = mysqli_real_escape_string($db, $_POST['file_imag_name']);

  	$target = "profiles/".basename($image);

  	$sql = "INSERT INTO profiles (image, file_imag_name) VALUES ('$image', '$file_imag_name')";
  	mysqli_query($db, $sql);

  	if (move_uploaded_file($_FILES['image']['tmp_name'], $target)) {
  		$msg = "Good Luck Your Image uploaded successfully";
  	}else{
  		$msg = "Failed to upload image";
  	}
  }
  $result = mysqli_query($db, "SELECT * FROM profiles");
?>
<!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='profiles/".$row['image']."' >";
      	echo "<p>".$row['file_imag_name']."</p>";
      echo "</div>";
    }
  ?>
  <form method="POST" action="profile.php" enctype="multipart/form-data">
  	<input type="hidden" name="size" value="99999999">
  	<div>
  	  <input type="file" name="image">
  	</div>
  	<div>
      <textarea 
      	id="text" 
      	cols="50" 
      	rows="5" 
      	name="file_imag_name" 
      	placeholder="Say something about this profile..."></textarea>
  	</div>
  	<div>
  		<button type="submit" name="upload">Save Image/File</button>
  	</div>
  </form>
</div>
</body>
</html>

And that’s all.

Read Also:  ASP.NET Disable right click on web page and images using jquery

Also Read: PHP Simple Image Upload and Display Source Code

Be sure to HTML Form include the enctype in your HTML form tag. such as bellow Example:

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

Without the HTML attribute FORM enctype=”multipart/form-data”, the image or file won’t be uploaded. so must added the enctype is the encoding type that specifies format how the HTML form-data should be encoded when yout profile submitting the HTML form. Without it file or images uploads won’t work.

Read Also:  PHP MySQL Inline Editing Dynamically using jQuery Ajax

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  NodeJS Login and Registration Authentication using mysql
  2. Read Also:  Global variable in laravel controller Example
  3. Read Also:  Laravel 5.8 Autocomplete Textbox Fields Using jQuery
  4. Read Also:  jquery reload page Automatically Example
  5. Read Also:  how to fetch images from database in php
  6. Read Also:  PHP OOP CRUD MVC Framework Tutorial
  7. Read Also:  VueJS Force download GET request using axios
  8. Read Also:  Multiple Image Upload using PHP into MYSQL database
  9. Read Also:  What is the difference between Java and JavaScript?
  10. Read Also:  how to fetch images from database in php

Leave a Comment

Your email address will not be published. Required fields are marked *