Simple Drag and Drop Image Upload with MySQL PHP Script


Simple Drag and Drop Image Upload with MySQL PHP Script

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 = "<a href="https://www.sourcecodeter.com">Sourcecodester</a>
" rel="nofollow">https://www.sourcecodeter.com">Sourcecodester</a>
</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!!

 

 

Have any Question or Comment?

Leave a Reply

Your email address will not be published. Required fields are marked *