How to Drag and Drop Image Upload in PHP with MySQL?
Apr 13, 2022 . Admin
Hello dev,
I am going to explain you drag and drop image upload in PHP MySQL example. You will learn image upload and store in PHP database. This article will give you simple example of drag and drop image upload in PHP.
I will give you simple example of drag and drop multiple image upload in PHP. This is the examle of drag and drop image upload using PHP.
So, let's see bellow solution:
connect.php
<?php
$host = "localhost";
$dbuser = "root";
$dbpass = "";
$dbname = "draganddrop";
$conn = new mysqli($host, $dbuser, $dbpass, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>
index.php
<!DOCTYPE html>
<html>
<head>
<title>How to Drag and Drop Image Upload in PHP with MySQL? - Mywebtuts.com</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/dropzone.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<div class="card">
<div class="row">
<div class="col-md-12">
<div class="card-header text-center">
<h3>How to Drag and Drop Image Upload in PHP with MySQL? - Mywebtuts.com</h3>
</div>
<div class="card-body mt-2">
<form action="upload.php" enctype="multipart/form-data" name="img" class="dropzone" id="image-upload">
<div class="mt-2"></div>
</form>
<div class="text-center">
<input type="button" name="submit" value="submit" id="submit" class="btn btn-primary mt-3">
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.2.0/min/dropzone.min.js"></script>
<script type="text/javascript">
Dropzone.options.imageUpload = {
maxFilesize:1,
acceptedFiles: ".jpeg,.jpg,.png,.gif"
};
</script>
</body>
</html>
upload.php
<?php
if(!empty($_FILES)){
require 'connect.php';
$uploadDir = "uploads/";
$fileName = basename($_FILES['file']['name']);
$uploadFilePath = $uploadDir.$fileName;
if(move_uploaded_file($_FILES['file']['tmp_name'], $uploadFilePath)){
$sql = "INSERT INTO images (image, uploaded_on) VALUES ('".$fileName."', NOW())";
$insert = $conn->query($sql);
}
}
?>
Output:
I hope it will help you...