PHP - Simple Image Upload

In this tutorial we will create a Simple Image Upload using PHP. PHP is a server-side scripting language designed primarily for web development. It is a lean and consistent way to access databases. This means developers can write portable code much easier. It is mostly used by a newly coders for its user friendly environment. So Let's do the coding.

Before we started:

First you have to download & install XAMPP or any local server that run PHP scripts. Here's the link for XAMPP server https://www.apachefriends.org/index.html. And this is the link for the jquery that i used in this tutorial https://jquery.com/

Creating Database

Open your database web server then create a database name in it db_image, after that click Import then locate the database file inside the folder of the application then click ok. tut1

Creating the database connection

Open your any kind of text editor(notepadd++, etc..). Then just copy/paste the code below then name it conn.php.
  1. <?php
  2. $conn = new mysqli('localhost', 'root', '', 'db_image');
  3.  
  4. if(!$conn){
  5. die("Error!: Cannot connect to the database!");
  6. }
  7. ?>

Creating The Interface

This is where we will create a simple form for our application. To create the forms simply copy and write it into you text editor, then save it as shown below. index.php.
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
  5. <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
  6. </head>
  7. <body>
  8. <nav class="navbar navbar-default">
  9. <div class="container-fluid">
  10. <a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a>
  11. </div>
  12. </nav>
  13. <div class="col-md-3"></div>
  14. <div class="col-md-6 well">
  15. <h3 class="text-primary">PHP - Simple Image Upload</h3>
  16. <hr style="border-top:1px dotted #ccc;"/>
  17. <div class="col-md-2"></div>
  18. <div>
  19. <form method="POST" action="save_query.php" enctype="multipart/form-data">
  20. <label>Name:</label>
  21. <input type="text" name="name"/>
  22. <div style="float:right;">
  23. <div id = "preview" style = "width:150px; height :150px; border:1px solid #000;">
  24. <center id = "lbl">[Photo]</center>
  25. </div>
  26. <input type = "file" id = "photo" name = "photo" />
  27. </div>
  28. <div style="clear:both;"></div>
  29. <br/>
  30. <center><button class="btn btn-primary" name="submit"><span class="glyphicon glyphicon-save"></span> Save</button></center>
  31. </form>
  32. </div>
  33. <br />
  34. <div class="col-md-12">
  35. <table class="table table-bordered">
  36. <thead>
  37. <tr>
  38. <th>Name</th>
  39. <th>Photo</th>
  40. </tr>
  41. </thead>
  42. <tbody>
  43. <?php
  44. require 'conn.php';
  45. $query = $conn->query("SELECT * FROM `member`") or die(mysqli_errno());
  46. while($fetch = $query->fetch_array()){
  47.  
  48.  
  49. ?>
  50. <tr>
  51. <td><?php echo $fetch['name']?></td>
  52. <td><center><img src="<?php echo "upload/".$fetch['photo']?>" width="100px" height="100px"></center></td>
  53. </tr>
  54. <?php
  55. }
  56. ?>
  57. </tbody>
  58. </table>
  59. </div>
  60. </div>
  61. </body>
  62. <script src="js/jquery-3.2.1.min.js"></script>
  63. <script type = "text/javascript">
  64. $(document).ready(function(){
  65. $pic = $('<img id = "image" width = "100%" height = "100%"/>');
  66. $lbl = $('<center id = "lbl">[Photo]</center>');
  67. $("#photo").change(function(){
  68. $("#lbl").remove();
  69. var files = !!this.files ? this.files : [];
  70. if(!files.length || !window.FileReader){
  71. $("#image").remove();
  72. $lbl.appendTo("#preview");
  73. }
  74. if(/^image/.test(files[0].type)){
  75. var reader = new FileReader();
  76. reader.readAsDataURL(files[0]);
  77. reader.onloadend = function(){
  78. $pic.appendTo("#preview");
  79. $("#image").attr("src", this.result);
  80. }
  81. }
  82. });
  83. });
  84. </script>
  85. </html>

Creating the Main Function

This code contains the specific script for the upload. This will process the image file that have been upload then will save it to a designated directory. To do that write these block of codes inside the Text editor and call it as save_query.php.
  1. <?php
  2. require_once 'conn.php';
  3.  
  4. if(ISSET($_POST['submit'])){
  5.  
  6. if($_FILES['photo']['name'] != "" && $_POST['name'] != ""){
  7. $name = $_POST['name'];
  8. $image_name = $_FILES['photo']['name'];
  9. $image_temp = $_FILES['photo']['tmp_name'];
  10. $extension = explode('.', $image_name);
  11. $image = time().".".end($extension);
  12. move_uploaded_file($image_temp, "upload/".$image);
  13. $conn->query("INSERT INTO `member` VALUES('', '$name', '$image')") or die(mysql_errno());
  14. header('location:index.php');
  15. }
  16. }
  17. ?>
There you have it we successfully created a Simple Image Upload using PHP. I hope that this simple tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding!!!

Add new comment