Site icon Technopoints

Upload Store Retrieve and Delete Images using PHP and MySQLi

Upload Store Retrieve and Delete Images using PHP and MySQLi

To Upload Store Retrieve and Delete Images to and from the database by using procedural PHP and MySQLi is shown in this tutorial. To understand the code make sure you have gone through our previous tutorial basic image upload to the folder. Uploading images in MySQL database is not a good idea because you first need skills to convert that images into blob (Binary Large Object) and then you can upload it in MySQL and when you are going to retrieve it you need to again convert it in original form. So In this tutorial we are providing you efficient way to upload images on your server and save it’s with format in database when you want to retrieve the image just fetch the image name from database and link with your path.

1. Configure ‘php.ini’ File

Before moving to the coding part , You must have to configure your php.ini file (location of this file varies as per platform). In your php.ini  file, search for the ‘file_uploads’ directive, and check whether is it set to On. This control whether to allow HTTP file uploads.

2. Create Database

To store the image title and image name a table need to create in the database. So lets create the database by using following queries. The following SQL  create image table which consist of  id, title, imagename, time details.

CREATE TABLE `image` (
  `id` int(11) NOT NULL,
  `title` varchar(500) NOT NULL,
  `imagename` text NOT NULL,
  `time` datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

3.Database Configuration

First of all, to make it convenient, we will create a new PHP file for database configuration named dbconfig.php  that holds all configured parameters:

<?php
$con = mysqli_connect("localhost","root","","technopoints");

// Check connection
if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }
?>

 

4. Create User Interface

Create HTML Form to Upload Image

Now Its time to Create an HTML form index.html  to allow the user to choose a Image they want to upload

Ensure <form> contains the following attributes.

  • method=”post”
  • enctype=”multipart/form-data”
  • and input type=”file”
<!DOCTYPE>
<html>
<title>IMAGE UPLOADING PAGE</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-compatible" content="IE-edge">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="index.css"></script>
<style>
input[type=text] {
    width: 95%;
    padding: 7px 15px;
    margin: 3px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=submit]{ 
    padding: 10px 20px;
    background-color: white;
    color: black;
    border: 2px solid #555555;
}

 input[type=submit]:hover {
	align:center;
    background-color: #555555;
    color: white;
}
.cck {
  display: block;
  margin-right: auto;
  margin-left: auto;
}
body {
	background-color:rgba(100,200,255,0.5);
}
</style>
</head>
<body><div style="background-color:rgba(100,200,255,0.5);" align="center"><h2></h2></div>
<br><br>
<div style="background-color:rgba(100,200,255,0.5);" align="center">
<form action="uploading.php" method="post" enctype="multipart/form-data">
<h2>Image Uploading Section |<a href="">Technopoints</a></h2><br><br>
<table>								
<tr><td height="70" width="100">Title</td><td><input type="text" required="required" name="ntitle" class="resizedTextbox"><br><br></td></tr>
<tr><td colspan="2"><input type="file" class="cck" name="sfile" id="fileName" accept="image/*"><br><br></td></tr>
<tr><td colspan="2"><input class="cck" type="submit" name="notification" value="Upload"/></td></tr>
</table>
</form>
</div>
</body>
</html>

 

this file index.php will send data to uploading.php to upload the image data into the database.

CSS for the HTML Form

Add styling to the HTML form (index.html) by using CSS to make the content pretty and save the file by name index.css

input[type=text] {
    width: 95%;
    padding: 7px 15px;
    margin: 3px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=submit]{ 
    padding: 10px 20px;
    background-color: white;
    color: black;
    border: 2px solid #555555;
}

 input[type=submit]:hover {
	align:center;
    background-color: #555555;
    color: white;
}
.cck {
  display: block;
  margin-right: auto;
  margin-left: auto;
}
body {
	background-color:rgba(100,200,255,0.5);
}

Now place the two files in the same folder. Remember to save the files with the right extensions (respectively “.htm” and “.css”) . The combined view of the both HTML and CSS is illustrate in the following snapshot.

5. Upload Store Image into Server

Now its time to process the data uploaded by the user, this code is written in uploading.php  It will store the uploaded file in a upload folder on permanent basis as well as implement some basic security check like file type and file size to ensure that users upload the correct file type and within the allowed limit.

<?php 
require 'dbconfig.php';
session_start();
$_SESSION['firstname'] = "Technopoints";
if($con == FALSE)
{
echo "connection is not done";
}
if(isset($_POST['notification'])){
	$title = $_POST['ntitle'];
	$uploadtime = date("Y-m-d H:i:s");
	$cname = $_FILES['sfile']['name'];
}
if(!empty($cname))	{	
				$tname = $_FILES['sfile']['tmp_name'];
				$tname = $_FILES['sfile']['tmp_name'];
				$size	= $_FILES['sfile']['size'];
				$name = $_SESSION['firstname'].date("his");
				$fext = pathinfo($cname, PATHINFO_EXTENSION);
				$fire = pathinfo($name,PATHINFO_FILENAME);
				$savename = $fire.".".$fext;
				$finalfile = "upload/$savename";
														}
		if(!empty($cname)){
	 if($size < 500000){
				check = move_uploaded_file($tname,$finalfile);
				if($check){
$qry1 = "INSERT INTO `image`(`title`, `imagename`, `time`) VALUES ('$title','$savename','$uploadtime')";
$test =	mysqli_query($con,$qry1);
if($test = TRUE){?>if(confirm("File Uploaded Sucessfully!!!"))
				{	document.location = 'index.php';
				}
				else
				{
					document.location = 'index.php';
				}<?php
											}
					else {?>if(confirm("file is not uploaded"))
			
				{	document.location = 'index.php';
				}
				else
				{
					document.location = 'index.php';
				}<?php
													//echo "file is not uploaded";
				}
			}
	 }
	 else{
		 echo "file size is too large";	
	 }
 }else
 {	
	echo "Please select an file to upload";
 }												
 ?>

You might be wondering what this code is all about, So here is the explanation of the code:

6. Retrieve And View Images From the Server

Now retrieve the uploaded images from the server based on the file names in the database and display images with its title in the web page.

<html>
<?php require 'dbconfig.php'; ?>
<title></title>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<table class="table table-bordered" border="2">
<tr> <td colspan="5"><center><h3>Previously Uploaded | <a href="https://technopoints.co.in/">Technopoints</a></h3></center></td></tr>
  <tr> 
    
      <tr><center><th>Description</th><th>Banner Thumbnail</th><th>Action</th></center></tr>
	<?php $fetchqry = "SELECT * FROM `image` ORDER BY time DESC"; 
	$result=mysqli_query($con,$fetchqry);
	$num=mysqli_num_rows($result);
	if($num > 0){
    while($row = mysqli_fetch_array($result,MYSQLI_ASSOC)){ ?>
		

      <tr><td><p><?php echo $row['title'];?></p></td><td><img src="upload/<?php echo $row['imagename']?>" width="450" height="200" /> </td>
	  <td width="10%"><input type="button" class="btn" value="Delete" id="button" onclick="deleteme(<?php echo $row['id']; ?>)"></td></tr>  
				
				<script language="javascript">
				function deleteme(delid) 
				{
						window.location.href='deleteimage.php?del_id='+delid+'';
						return true;
				}
				</script>
								<?php
	}
	}
	?>
  </tr>
</table>
</div>
</body>
</html>

 

User can able to delete the image entry from the database by clicking the delete button provided in an interface As shown in the snapshot below:

7. Deleting image entries from the database

To delete the particular image entry from the database we use the id attribute,  $_GET method is used for the previous page input to identify which delete button is clicked by the user. After successfully deleting the data user got notified by pop-up and redirect to the show.php interface again

<?php 
include 'dbconfig.php';
$fetchqry = "delete from `image` where id='".$_GET['del_id']."'";
$result=mysqli_query($con,$fetchqry);
if($result==TRUE){ ?> 
	alert("Data deleted!!!");
			window.location = "show.php";
			 <?php
}
?>

That’s it. Finally You Learn to Upload Store Retrieve and Delete Images to and from the database by using procedural PHP and MySQLi. If you have any doubts regarding to this tutorials feel free to ask in the comment section. To catch even more knowledgeble and easy understandable tutorials please subcribe to our email notification.

Download Source Code

Exit mobile version