Upload Image, display, edit and delete in PHP
Free Scripts » Upload Image, display, edit and delete in PHP
However, you will learn how to upload, display, edit, and delete the image from the folder and database table using PHP and MYSQL database with example.
Steps to Create Simple PHP script to Upload Image, display, edit and delete
- Create a Database and Table
- Create a Database Connection
- Create a folder to save all images
- Create PHP scripts to upload the image
- Create a CSS file
- Make upload.php file
- Image edit using PHP and MYSQL database
- Delete image from the folder and database using PHP
- Creating Pagination Buttons
Demo and download the script.
Demo Upload Image, display, edit and delete in PHP
Download Upload Image, display, edit and delete in PHP
HTML and CSS code Upload Image, display, edit and delete
Creating Structure: In this section, we will just create the basic website structure of the Upload Image, display, edit.
CREATE DATABASE;
1. create a table
CREATE TABLE IF NOT EXISTS `items` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`image` varchar(255) DEFAULT NULL,
`title` varchar(255) DEFAULT NULL,
`description` text DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
$db = mysqli_connect("localhost","root","","agernic_pagination");
if (mysqli_connect_errno()){
echo "Failed to connect to MySQL: " . mysqli_connect_error();
die();
}
4. Create PHP scripts to upload the image
index.php<?php require_once("config.php");?> if(isset($_GET['action']))
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Upload image, display, edit and delete in PHP </title>
</head>
<body>
<div class="container_display">
<span style="float:right;"><a href="upload.php"><button class="btn-primary">Upload New image </button></a></span>
<br><br>
<?php
if(isset($_GET['image_success']))
{
echo '<div class="success">Image Uploaded successfully</div>';
}
{
$action=$_GET['action'];
if($action=='saved')
{
echo '<div class="success">Saved </div>';
}
elseif($action=='deleted')
{
echo '<div class="success">Image Deleted Successfully ... </div>';
}
}
?>
<table cellpadding="10">
<tr>
<th> Image</th>
<th>Title</th>
<th>Action</th>
</tr>
<?php $res=mysqli_query($db,"SELECT* from items ORDER by id DESC");
while($row=mysqli_fetch_array($res))
{
echo '<tr>
<td><img src="uploads/'.$row['image'].'" height="200"></td>
<td>'.$row['title'].'</td>
<td><a href="edit.php?id='.$row['id'].'"><button class="btn-primary">Edit </button></a>
<br> <br>
<a href=\'delete.php?id='.$row['id'].'\' onClick=\'return confirm("Are you sure you want to delete?")\'"><button class="btn-primary btn_del">Delete</button></a>
</td>
</tr>';
} ?>
</table>
</div>
</body>
</html>
How to update image in database and folder using PHP
5. Create a CSS file style.css
body{ label {
background-color: #f1f1f1;
}
.form-control {
width: 100%;
height: 25px;
padding: 6px 12px;
font-size: 14px;
color: #555;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
}
.btn-primary {
padding: 6px 12px;
font-size: 14px;
font-weight: 400;
cursor: pointer;
border: 1px solid transparent;
border-radius: 4px;
background-color: #337ab7;
color: #fff;
}
.btn_del {
background-color: #FF5733 !important;
}
.container
{
margin-left: 30%;
width: 400px ;
background-color: #fff;
padding: 10px;
padding-right: 40px;
border: 1px solid #ccc;
border-radius: 4px;
}
.container_display
{
margin-left: 10%;
width: 900px ;
background-color: #fff;
padding: 10px;
padding-right: 40px;
border: 1px solid #ccc;
border-radius: 4px;
}
font-size: 16px;
}
.success
{
margin: 5px auto;
border-radius: 5px;
border: 3px solid #fff;
background: #33CC00;
color: #fff;
font-size: 20px;
padding: 10px;
box-shadow: 10px 5px 5px grey;
}
6. Make upload.php file
<?php require_once("config.php");?> foreach ($error as $error) {
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Image Upload in PHP and MYSQL database</title>
</head>
<body>
<?php
if(isset($_POST['form_submit']))
{
$title=$_POST['title'];
$folder = "uploads/";
$image_file=$_FILES['image']['name'];
$file = $_FILES['image']['tmp_name'];
$path = $folder . $image_file;
$target_file=$folder.basename($image_file);
$imageFileType=pathinfo($target_file,PATHINFO_EXTENSION);
//Allow only JPG, JPEG, PNG & GIF etc formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
$error[] = 'Sorry, only JPG, JPEG, PNG & GIF files are allowed';
}
//Set image upload size
if ($_FILES["image"]["size"] > 1048576) {
$error[] = 'Sorry, your image is too large. Upload less than 1 MB KB in size.';
}
if(!isset($error))
{
// move image in folder
move_uploaded_file($file,$target_file);
$result=mysqli_query($db,"INSERT INTO items(image,title) VALUES('$image_file','$title')");
if($result)
{
header("location:index.php?image_success=1");
}
else
{
echo 'Something went wrong';
}
}
}
if(isset($error)){
echo '<div class="message">'.$error.'</div><br>';
}
}
?>
<div class="container">
<form action="" method="POST" enctype="multipart/form-data">
<label>Image </label>
<input type="file" name="image" class="form-control" required >
<label>Title</label>
<input type="text" name="title" class="form-control">
<br><br>
<button name="form_submit" class="btn-primary"> Upload</button>
</form>
</div>
</body>
</html>
7. Image edit using PHP and MYSQL database
make edit.php file
<?php require_once("config.php"); $id=$_GET['id']; ?> if(isset($error)){ foreach ($error as $error) { }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Image Upload and edit in PHP and MYSQL database</title>
</head>
<body>
<?php
if(isset($_POST['update_submit']))
{
$title=$_POST['title'];
$folder = "uploads/";
$image_file=$_FILES['image']['name'];
$file = $_FILES['image']['tmp_name'];
$path = $folder . $image_file;
$target_file=$folder.basename($image_file);
$imageFileType=pathinfo($target_file,PATHINFO_EXTENSION);
if($file!=''){
//Set image upload size
if ($_FILES["image"]["size"] > 500000) {
$error[] = 'Sorry, your image is too large. Upload less than 500 KB in size.';
}
//Allow only JPG, JPEG, PNG & GIF
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
$error[] = 'Sorry, only JPG, JPEG, PNG & GIF files are allowed';
}
}
if(!isset($error))
{
if($file!='')
{
$res=mysqli_query($db,"SELECT* from items WHERE id=$id limit 1");
if($row=mysqli_fetch_array($res))
{
$deleteimage=$row['image'];
}
unlink($folder.$deleteimage);
move_uploaded_file($file,$target_file);
$result=mysqli_query($db,"UPDATE items SET image='$image_file',title='$title' WHERE id=$id");
}
else
{
$result=mysqli_query($db,"UPDATE items SET title='$title' WHERE id=$id");
}
if($result)
{
header("location:index.php?action=saved");
}
else
{
echo 'Something went wrong';
}
}
}
echo '<div class="message">'.$error.'</div><br>';
}
$res=mysqli_query($db,"SELECT* from items WHERE id=$id limit 1");
if($row=mysqli_fetch_array($res))
{
$image=$row['image'];
$title=$row['title'];
}
?>
<div class="container" style="width:500px;">
<h1> Edit </h1>
<?php if(isset($update_sucess))
{
echo '<div class="success">Image Updated successfully</div>';
} ?>
<form action="" method="POST" enctype="multipart/form-data">
<label>Image Preview </label><br>
<img src="uploads/<?php echo $image;?>" height="100"><br>
<label>Change Image </label>
<input type="file" name="image" class="form-control">
<label>Title</label>
<input type="text" name="title" value="<?php echo $title;?>" class="form-control">
<br><br>
<button name="update_submit" class="btn-primary">Update </button>
</form>
</div>
</body>
</html>
Tags: How to insert edit and delete image / multiple images in PHP?
insert, view, edit and delete record from database using php and mysqli
display image in edit form to update it in php
how to update image and remove the old image from folder in php
how to update old image if no image selected in php
insert update delete in php with source code
php edit image and save
Delete image from the folder and database using PHP
8. Delete image from the folder and database using PHP
Make delete.php file
<?php require_once("config.php");
$id=$_GET['id'];
$res=mysqli_query($db,"SELECT* from items WHERE id=$id limit 1");
if($row=mysqli_fetch_array($res))
{
$deleteimage=$row['image'];
}
$folder="uploads/";
unlink($folder.$deleteimage);
$result=mysqli_query($db,"DELETE from items WHERE id=$id") ;
if($result)
{
header("location:index.php?action=deleted");
}
?>
Get demo and download the script.
Demo Upload Image, display, edit and delete in PHP
Download Upload Image, display, edit and delete in PHP
How to insert edit and delete image / multiple images in PHP?
insert, view, edit and delete record from database using php and mysqli
display image in edit form to update it in php
Upload Image, display, edit and delete in PHP - free scripts
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.