Drag and Drop Image Upload in PHP MySQL Example

03-Apr-2023

.

Admin

Drag and Drop Image Upload in PHP MySQL Example

Hi friends,

I am going to explain you drag and drop multiple image upload in PHP. You will learn drag and drop image upload in PHP.

This article will give you drag and drop image upload in PHP MySQL example. We will see image upload and store in database PHP.

I will give you simple example of drag and drop image upload in PHP MySQL.

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>Drag and Drop Image Upload in PHP MySQL Example - Nicesnippets.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 class="bg-dark">

<div class="container mt-5">

<div class="card">

<div class="row">

<div class="col-md-12">

<div class="card-header text-center">

<h3>Drag and Drop Image Upload in PHP MySQL Example - Nicesnippets.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.....

#PHP