Simple Drag and Drop Image Upload with MySQLi

Submitted by razormist on Thursday, January 12, 2017 - 19:04.

Language

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 
  1. <!DOCTYPE html>
  2. <html lang = "en">
  3. 	<head>
  4. 		<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css"/>
  5. 		<link rel = "stylesheet" type = "text/css" href = "css/style.css"/>
  6. 		<meta charset = "UTF-8" name= "viewport" content = "width=device-width, initial-scale=1" />
  7. 	</head>
  8. <body>
  9. 	<nav class = "navbar navbar-default">
  10. 		<div class = "container-fluid">
  11. 			<a class = "navbar-brand" href = "https://www.sourcecodeter.com">Sourcecodester</a>
  12. 		</div>
  13. 	</nav>
  14. 	<div class = "row">
  15. 		<div class = "col-md-3">
  16. 		</div>
  17. 		<div class = "col-md-6 well" style = "z-index:99999;">
  18. 			<h3 class = "text-primary">Drag and Drop Image Upload with MySQLi</h3>
  19. 			<hr style = "border-top: 1px dotted #8c8b8b;"/>
  20. 			<a href = "index.php">Back</a>
  21. 			<table class = "table table-bordered table-hover">
  22. 				<thead>
  23. 					<tr>
  24. 						<th>Image Name</th>
  25. 						<th>Image</th>
  26. 					</tr>
  27. 				</thead>
  28. 				<tbody>
  29. 					<?php
  30. 						$conn = new mysqli('localhost', 'root', '', 'image') or die(mysqli_error());
  31. 						$stmt= $conn->prepare("SELECT * FROM `photo`") or die(mysqli_error());
  32. 						if($stmt->execute()){
  33. 							$result = $stmt->get_result();
  34. 						}	
  35. 						while($fetch = $result->fetch_array()){						
  36. 					?>
  37. 					<tr>
  38. 						<td><?php echo $fetch['photo_name']?></td>
  39. 						<td><center><img src = "<?php echo 'upload/'.$fetch['photo_name']?>" height = "50px" width = "50px"/></center></td>
  40. 					</tr>
  41. 					<?php
  42. 						}
  43. 					?>
  44. 				</tbody>
  45. 			</table>
  46. 		</div>
  47. 	</div>
  48. </body>
  49. <script src = "js/jquery-3.1.1.js"></script>
  50. <script src = "js/upload.js"></script>
  51. </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.

Tags

Comments

Submitted byJan Molendijk (not verified)on Sun, 01/15/2017 - 22:05

Fatal error: Call to undefined method mysqli_stmt::get_result() in /home/u790012824/public_html/Page/picture/result.php on line 33

Add new comment

About text formats