Example : Php code to Save, Edit, Search, and Delete Image and PDF files in a MySQL Database.
----------------------------------------------------------------------------------
create database and table in MySql database as -
CREATE DATABASE filedb;
USE filedb;
CREATE TABLE imagefile (
slno5 INT AUTO_INCREMENT PRIMARY KEY,
name5 VARCHAR(100),
mobile5 VARCHAR(15),
email5 VARCHAR(100),
photo5 VARCHAR(255),
pdf5 VARCHAR(255)
);
NB: Also, create 'Uploads' folder manually in the source folder first where image and pdf files will store, only path is stored in database file.
-----------------------------------------------------------------------------------
<?php
error_reporting(E_ERROR | E_PARSE);
/* --------------- Connectivity Code ----------------- */
$conn = mysqli_connect("localhost", "root", "", "filedb");
if (!$conn) {
die("Database Connection Failed: " . mysqli_connect_error());
}
/* --------------- Variable Declaration ---------------- */
$slno3 = "";
$name3 = "";
$mobile3 = "";
$email3 = "";
$photo3 = "";
$pdf3 = "";
$msg = "";
$msgclass = "";
$uploadDir3 = "uploads/"; // Store all uploaded pdf and image files located inside the project folder as "uploads" folder.
/*----------------- Photo and Pdf Save Code ---------------- */
if (isset($_POST['submit1']))
{
$name3 = $_POST['name1'];
$mobile3 = $_POST['mobile1'];
$email3 = $_POST['email1'];
if ($name3 == "" || $mobile3 == "" || $email3 == "")
{
$msg = "Please enter all required fields.";
$msgclass = "error";
}
else
{
$photo3 = "";
$pdf3 = "";
/* Code for Upload photo */
if ($_FILES['photo1']['name'] != "")
{
$photoName3 = time() . "_" . basename($_FILES['photo1']['name']);
$photoPath3 = $uploadDir3 . $photoName3;
if (move_uploaded_file($_FILES['photo1']['tmp_name'], $photoPath3))
{
$photo3 = $photoPath3;
}
}
/* Code for Upload PDF */
if ($_FILES['pdf1']['name'] != "")
{
$pdfName3 = time() . "_" . basename($_FILES['pdf1']['name']);
$pdfPath3 = $uploadDir3 . $pdfName3;
if (move_uploaded_file($_FILES['pdf1']['tmp_name'], $pdfPath3))
{
$pdf3 = $pdfPath3;
}
}
/* Insert record into MySql database */
$sql = "INSERT INTO imagefile(name5, mobile5, email5, photo5, pdf5)
VALUES('$name3', '$mobile3', '$email3', '$photo3', '$pdf3')";
if (mysqli_query($conn, $sql))
{
$msg = "Record saved successfully.";
$msgclass = "success";
$name3 = "";
$mobile3 = "";
$email3 = "";
$photo3 = "";
$pdf3 = "";
}
else
{
$msg = "Record not saved: " . mysqli_error($conn);
$msgclass = "error";
}
}
}
/* NB : In the above save code, photo/pdf is saved in manually created 'uploads' folder inside the source code folder whereas
only path is saved in mysql database photo5, pdf5 fields */
/* -------------- Photo and Pdf Search Code -------------*/
if (isset($_POST['search1']))
{
$slno3 = $_POST['slno1'];
if($slno3 == "")
{
$msg = "Please enter Serial No, for search.";
$msgclass = "error";
}
else
{
$sql = "SELECT * FROM imagefile WHERE slno5='$slno3'";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0)
{
$row = mysqli_fetch_assoc($result);
$slno3 = $row['slno5'];
$name3 = $row['name5'];
$mobile3 = $row['mobile5'];
$email3 = $row['email5'];
$photo3 = $row['photo5'];
$pdf3 = $row['pdf5'];
$msg = "Record found.";
$msgclass = "success";
}
else
{
$msg = "Record not found.";
$msgclass = "error";
}
}
}
/* -------------- Photo and Pdf UPDATE codes -------------- */
if (isset($_POST['update1']))
{
$slno3 = $_POST['slno1'];
$name3 = $_POST['name1'];
$mobile3 = $_POST['mobile1'];
$email3 = $_POST['email1'];
$oldPhoto3 = $_POST['oldphoto1'];
$oldPdf3 = $_POST['oldpdf1'];
if ($slno3 == "")
{
$msg = "Please enter Serial No for update.";
$msgclass = "error";
}
else
{
$photo3 = $oldPhoto3;
$pdf3 = $oldPdf3;
/* Replace or Edit old photo if new photo is selected */
if ($_FILES['photo1']['name'] != "")
{
if ($oldPhoto3 != "" && file_exists($oldPhoto3))
{
unlink($oldPhoto3);
}
$photoName3 = time() . "_" . basename($_FILES['photo1']['name']);
$photoPath3 = $uploadDir3 . $photoName3;
if (move_uploaded_file($_FILES['photo1']['tmp_name'], $photoPath3))
{
$photo3 = $photoPath3;
}
}
/* Replace or Edit old PDF if new PDF is selected */
if ($_FILES['pdf1']['name'] != "")
{
if ($oldPdf3 != "" && file_exists($oldPdf3))
{
unlink($oldPdf3);
}
$pdfName3 = time() . "_" . basename($_FILES['pdf1']['name']);
$pdfPath3 = $uploadDir3 . $pdfName3;
if (move_uploaded_file($_FILES['pdf1']['tmp_name'], $pdfPath3))
{
$pdf3 = $pdfPath3;
}
}
/* Update record in MySql database */
$sql = "UPDATE imagefile SET
name5='$name3',
mobile5='$mobile3',
email5='$email3',
photo5='$photo3',
pdf5='$pdf3'
WHERE slno5='$slno3'";
if (mysqli_query($conn, $sql))
{
$msg = "Record updated successfully.";
$msgclass = "success";
}
else
{
$msg = "Record not updated: " . mysqli_error($conn);
$msgclass = "error";
}
}
}
/* -------------- Photo and Pdf DELETE Code -------------- */
if (isset($_POST['delete1']))
{
$slno3 = $_POST['slno1'];
if ($slno3 == "")
{
$msg = "Please enter Serial No for delete.";
$msgclass = "error";
}
else
{
$sql1 = "SELECT * FROM imagefile WHERE slno5='$slno3'";
$result1 = mysqli_query($conn, $sql1);
if (mysqli_num_rows($result1) > 0)
{
$row = mysqli_fetch_assoc($result1);
/* Delete photo from uploads folder */
if ($row['photo5'] != "" && file_exists($row['photo5']))
{
unlink($row['photo5']);
}
/* Delete pdf from uploads folder */
if ($row['pdf5'] != "" && file_exists($row['pdf5']))
{
unlink($row['pdf5']);
}
/* Delete record details from database */
$sql2 = "DELETE FROM imagefile WHERE slno5='$slno3'";
if (mysqli_query($conn, $sql2))
{
$msg = "Record deleted successfully.";
$msgclass = "success";
$slno3 = "";
$name3 = "";
$mobile3 = "";
$email3 = "";
$photo3 = "";
$pdf3 = "";
}
}
else
{
$msg = "Record not found.";
$msgclass = "error";
}
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Image and PDF Upload Design</title>
<!-- CSS Codes to Control page layout, buttons, messages, photo and PDF box. -->
<style>
body
{
font-family: Arial;
background: #eef3f7;
}
.container
{
width: 700px;
margin: 30px auto;
background: white;
padding: 25px;
border-radius: 10px;
box-shadow: 0 0 10px gray;
}
h2
{
text-align: center;
color: #003366;
}
label
{
font-weight: bold;
}
input
{
width: 100%;
padding: 9px;
margin-top: 5px;
margin-bottom: 12px;
}
.photo-frame
{
width: 180px;
height: 220px;
border: 4px solid #003366;
margin: 10px auto;
overflow: hidden;
background: #f9f9f9;
text-align: center;
}
.photo-frame img
{
width: 100%;
height: 100%;
object-fit: cover;
}
.no-photo
{
line-height: 220px;
color: gray;
font-weight: bold;
}
.pdf-box
{
text-align: center;
margin: 10px;
}
.pdf-box iframe
{
border: 2px solid #003366;
margin-top: 10px;
}
.btn-row
{
text-align: center;
}
button
{
padding: 10px 18px;
margin: 5px;
border: none;
color: white;
cursor: pointer;
border-radius: 4px;
}
.submit-btn
{
background: green;
}
.reset-btn
{
background: gray;
}
.search-btn
{
background: #003366;
}
.update-btn
{
background: orange;
}
.delete-btn
{
background: red;
}
.success
{
background: #d4edda;
color: #155724;
padding: 10px;
border-radius: 5px;
text-align: center;
font-weight: bold;
transition: opacity 1s;
}
.error
{
background: #f8d7da;
color: #721c24;
padding: 10px;
border-radius: 5px;
text-align: center;
font-weight: bold;
transition: opacity 1s;
}
</style>
</head>
<body>
<!-- HTML Form Design codes to display form for image and PDF upload management. -->
<div class="container">
<h2>Student Image and PDF Upload Form</h2>
<!-- Display success or error message -->
<?php if ($msg != "") { ?>
<p id="msgbox" class="<?php echo $msgclass; ?>">
<?php echo $msg; ?>
</p>
<?php } ?>
<form method="post" enctype="multipart/form-data">
<!-- Hidden fields code that store old file paths for update operation -->
<input type="hidden" name="oldphoto1" value="<?php echo $photo3; ?>">
<input type="hidden" name="oldpdf1" value="<?php echo $pdf3; ?>">
<label>Serial No</label>
<input type="text" name="slno1" value="<?php echo $slno3; ?>"
placeholder="Enter Serial No. for Search / Update / Delete">
<label>Student Name</label>
<input type="text" name="name1" value="<?php echo $name3; ?>">
<label>Mobile No</label>
<input type="text" name="mobile1" value="<?php echo $mobile3; ?>">
<label>Email</label>
<input type="email" name="email1" value="<?php echo $email3; ?>">
<label>Upload Photo</label>
<input type="file" name="photo1" id="photo1" accept="image/*" onchange="previewImage(event)">
<!-- Photo preview frame code -->
<div class="photo-frame">
<img id="preview1" src="<?php echo ($photo3 != '') ? $photo3 : ''; ?>"
style="<?php echo ($photo3 != '') ? '' : 'display:none;'; ?>">
<div id="nophoto1" class="no-photo" <?php if ($photo3 != '')
echo 'style="display:none;"'; ?>>
No Photo
</div>
</div>
<label>Upload PDF</label>
<input type="file" name="pdf1" id="pdf1" accept="application/pdf">
<!-- PDF preview section code -->
<div class="pdf-box" id="pdfshow1">
<?php
if ($pdf3 != "" && file_exists($pdf3))
{
?>
<a href="<?php echo $pdf3; ?>" target="_blank">Open PDF</a>
<br><br>
<iframe src="<?php echo $pdf3; ?>" width="500" height="300"></iframe>
<?php
}
else
{
echo "No PDF Uploaded";
}
?>
</div>
<!-- Button codes -->
<div class="btn-row">
<button type="submit" name="submit1" class="submit-btn">
Submit
</button>
<button type="button" class="reset-btn" onclick="clearForm();">
Reset
</button>
<button type="submit" name="search1" class="search-btn" formnovalidate>
Search
</button>
<button type="submit" name="update1" class="update-btn" formnovalidate>
Update
</button>
<button type="submit" name="delete1" class="delete-btn" onclick="return confirmDelete();"
formnovalidate>
Delete
</button>
</div>
</form>
</div>
<script>
/* ----- Code to Preview the image ----- */
function previewImage(event)
{
var reader = new FileReader();
reader.onload = function ()
{
var img = document.getElementById("preview1");
img.src = reader.result;
img.style.display = "block";
document.getElementById("nophoto1").style.display = "none";
};
reader.readAsDataURL(event.target.files[0]);
}
/* ----- Code to clear the form elements ----- */
function clearForm()
{
document.getElementsByName("slno1")[0].value = "";
document.getElementsByName("name1")[0].value = "";
document.getElementsByName("mobile1")[0].value = "";
document.getElementsByName("email1")[0].value = "";
document.getElementsByName("oldphoto1")[0].value = "";
document.getElementsByName("oldpdf1")[0].value = "";
document.getElementById("photo1").value = "";
document.getElementById("pdf1").value = "";
document.getElementById("preview1").src = "";
document.getElementById("preview1").style.display = "none";
document.getElementById("nophoto1").style.display = "block";
document.getElementById("pdfshow1").innerHTML = "No PDF Uploaded";
var msgbox = document.getElementById("msgbox");
if (msgbox)
{
msgbox.style.display = "none";
}
}
function confirmDelete()
{
return confirm("Are you sure you want to delete this record?");
}
/* ----- Code to hide message automatically ----- */
setTimeout(function ()
{
var msgbox = document.getElementById("msgbox");
if (msgbox)
{
msgbox.style.opacity = "0";
setTimeout(function ()
{
msgbox.style.display = "none";
}, 1000);
}
}, 3000);
</script>
</body>
</html> 
0 Comments