In this post you will learn how to upload and display image from database using PHP Mysql using OOP. In the previous post, we saw an example of CRUD Application using OOPs PHP and Mysql. In this example, I added code to upload a file in database using PHP OOP.
I use OOP concept to implement image uploads. There is a form with file input fields and a upload buttons. When a form with the select a file sent request with the uploaded image.
The PHP code moves the uploaded image to the uploads folder and insert the image unique name in database and returns the HTML image to display the preview in index page.
First of all, you need to understand that uploading users to your server can be a major security risk if you don’t validate correctly. So the most important part to consider is validation.
See also
- How to Upload & Display Image Using jQuery AJAX PHP and MySQL
- How to Upload File in CakePHP 4
- Ajax Multiple Image Upload with Edit Update Delete using PHP Mysql
- Upload Multiple Image in Database & Retrieve using jquery AJAX in PHP MYSQL
- How to Upload Multiple Images using jquery ajax in PHP MYSQL
- Upload File without using Form Submit button in jQuery AJAX PHP MySQL
Create a table in Database
-- -- Database: `crud_oops` -- -- Table structure for table `customers` -- CREATE TABLE `customers` ( `id` int(100) NOT NULL PRIMARY KEY AUTO INCEAMENT, `name` varchar(100) NOT NULL, `email` varchar(100) NOT NULL, `username` varchar(100) NOT NULL, `dob` date NOT NULL, `profile_image` varchar(100) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
Create Class File and Database Connection
customers.php
<?php
class Customers
{
private $servername = "localhost";
private $username = "root";
private $password = "";
private $dbname = "crud_oops";
public $con;
// Database Connection
public function __construct()
{
try {
$this->con = new mysqli($this->servername, $this->username, $this->password, $this->dbname);
} catch (Exception $e) {
echo $e->getMessage();
}
}
// Insert customer data into customer table
public function insertData($name, $email, $username, $dob, $file)
{
$allow = array('jpg', 'jpeg', 'png');
$exntension = explode('.', $file['name']);
$fileActExt = strtolower(end($exntension));
$fileNew = rand() . "." . $fileActExt; // rand function create the rand number
$filePath = 'uploads/'.$fileNew;
if (in_array($fileActExt, $allow)) {
if ($file['size'] > 0 && $file['error'] == 0) {
if (move_uploaded_file($file['tmp_name'], $filePath)) {
$query = "INSERT INTO customers(name, email, username, dob, profile_image) VALUES('$name','$email','$username','$dob','$fileNew')";
$sql = $this->con->query($query);
if ($sql==true) {
return true;
}else{
return false;
}
}
}
}
}
// Fetch customer records for show listing
public function displayData()
{
$sql = "SELECT * FROM customers";
$query = $this->con->query($sql);
$data = array();
if ($query->num_rows > 0) {
while ($row = $query->fetch_assoc()) {
$data[] = $row;
}
return $data;
}else{
return false;
}
}
}
?>
Create Insert or Add HTML Form
add.php
<?php
// Include database file
include 'customers.php';
$customerObj = new Customers();
// Insert Record in customer table
if(isset($_POST['submit'])) {
$name = $_POST['name'];
$email = $_POST['email'];
$username = $_POST['username'];
$dob = $_POST['dob'];
$file = $_FILES['image'];
$insertData = $customerObj->insertData($name, $email, $username, $dob, $file);
if ($insertData){
header("Location:index.php");
}else{
return false;
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Upload File in database using OOPs concept with PHP Mysql</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="card text-center" style="padding:15px;">
<h4>Upload File in database using OOPs concept with PHP Mysql</h4>
</div><br>
<div class="container">
<form method="POST" action="add.php" enctype="multipart/form-data">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" name="name" placeholder="Enter name" required="">
</div>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" name="email" placeholder="Enter email" required="">
</div>
<div class="form-group">
<label for="username">Username:</label>
<input type="text" class="form-control" name="username" placeholder="Enter username" required="">
</div>
<div class="form-group">
<label for="dob">Date of Birth:</label>
<input type="date" class="form-control" name="dob" required="">
</div>
<div class="form-group">
<label for="profile_image">Profile Image:</label>
<input type="file" class="form-control" name="image" required="">
</div>
<input type="submit" name="submit" class="btn btn-primary" style="float:right;" value="Submit">
</form>
</div>
</body>
</html>
Output
Create File View or listing
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Upload File in database using OOPs concept with PHP Mysql</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="card text-center" style="padding:15px;">
<h4>Upload File in database using OOPs concept with PHP Mysql</h4>
</div><br><br>
<div class="container">
<h2>View Records
<a href="add.php" class="btn btn-primary" style="float:right;">Add New Record</a>
</h2>
<table class="table table-hover">
<thead class="bg-dark" style="color:white">
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Username</th>
<th>Date of Birth</th>
<th>Profile Image</th>
</tr>
</thead>
<tbody>
<?php
// Include database file
include 'customers.php';
$customerObj = new Customers();
$customers = $customerObj->displayData();
foreach ($customers as $customer) {
?>
<tr>
<td>#<?php echo $customer['id']; ?></td>
<td><?php echo $customer['name']; ?></td>
<td><?php echo $customer['email']; ?></td>
<td><?php echo $customer['username']; ?></td>
<td><?php echo date('d-M-Y', strtotime($customer['dob'])); ?></td>
<td><img src="<?php echo 'uploads/'. $customer['profile_image'] ?>" width="180px"></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</body>
</html>
You can always support by sharing on social media or recommending my blog to your friends and colleagues. If you have any suggestions / problems about this tutorial, please comment on the form below.😊
