Simple Drag and Drop Image Upload with MySQLi

odulob6 · 2025-02-27T00:00:35+0000

The Simple Drag and Drop Image Upload with MySQLi was develop by using MySQLi/jQuery. This simple source code uses jQuery function to process the image when being dragged and dropped into the drop zone. The given source code can teach you on how to drag and drop a simple image to an advanced approach. It is an user friendly kind of source code, feel free to modify it and use it to your project.

This a sample code for displaying the image that been upload

<!DOCTYPE html>
<html lang = "en">
<head>
<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css"/>
<link rel = "stylesheet" type = "text/css" href = "css/style.css"/>
<meta charset = "UTF-8" name= "viewport" content = "width=device-width, initial-scale=1" />
</head>
<body>
<nav class = "navbar navbar-default">
<div class = "container-fluid">
<a class = "navbar-brand" href = "https://www.sourcecodeter.com">Sourcecodester</a>
</div>
</nav>
<div class = "row">
<div class = "col-md-3">
</div>
<div class = "col-md-6 well" style = "z-index:99999;">
<h3 class = "text-primary">Drag and Drop Image Upload with MySQLi</h3>
<hr style = "border-top: 1px dotted #8c8b8b;"/>
<a href = "index.php">Back</a>
<table class = "table table-bordered table-hover">
<thead>
<tr>
<th>Image Name</th>
<th>Image</th>
</tr>
</thead>
<tbody>
<?php
$conn

=

new

mysqli(

'localhost'

,

'root'

,

''

,

'image'

)

or die

(

mysqli_error

(

)

)

;
$stmt

=

$conn

->

prepare

(

"SELECT * FROM `photo`"

)

or die

(

mysqli_error

(

)

)

;
if

(

$stmt

->

execute

(

)

)

{
$result

=

$stmt

->

get_result

(

)

;
}
while

(

$fetch

=

$result

->

fetch_array

(

)

)

{
?>
<tr>
<td><?php

echo

$fetch

[

'photo_name'

]

?>

</td>
<td><center><img src = "<?php

echo

'upload/'

.

$fetch

[

'photo_name'

]

?>

" height = "50px" width = "50px"/></center></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
</body>
<script src = "js/jquery-3.1.1.js"></script>
<script src = "js/upload.js"></script>
</html>

I hope that this simple source code can help you to your project and future project. For more updates and tutorials, just kindly visit this site. Enjoy Coding!!

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.

2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Download

You must upgrade your account or reply in the thread to view hidden text.

Simple Drag and Drop Image Upload with MySQLi

More options

odulob6

452,292

323,341

323,350