Thursday, 20 October 2016

Insert and Fetch Images From Mysql Database in PHP



In this post we are going to discuss how can we store images into mysql database table and display that store image from mysql table to web page by using php script. If you have trying to store uploaded images into mysql table and if you have facing problem while inserting images into table then you can find solution of this things here. Here we will store uploaded images into mysql table and after this we will display that stored mysql image on web page by using php script. In mysql table images will be stored into binary form of data. We will use mysql blob data type in mysql table and in this datatype we have store images in binary form. Here we have define one input file element and one submit button we can select file from this input element and click on submit button then after image will be send to php script and by using file_get_contents() function we can read selected image file in string format and after this we will insert that image into mysql database. In mysql database table we have store image in column with data type blob. After this we want to display image on web page so we have show that inserted image into image tag by converting binary data into image by using base64encode() function. So this way we can insert image into mysql database by using php script.



Source Code


tbl_images


 --  
 -- Table structure for table `tbl_images`  
 --  
 CREATE TABLE IF NOT EXISTS `tbl_images` (  
  `id` int(11) NOT NULL AUTO_INCREMENT,  
  `name` blob NOT NULL,  
  PRIMARY KEY (`id`)  
 ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;  

index.php


 <?php  
 $connect = mysqli_connect("localhost", "root", "", "testing");  
 if(isset($_POST["insert"]))  
 {  
      $file = addslashes(file_get_contents($_FILES["image"]["tmp_name"]));  
      $query = "INSERT INTO tbl_images(name) VALUES ('$file')";  
      if(mysqli_query($connect, $query))  
      {  
           echo '<script>alert("Image Inserted into Database")</script>';  
      }  
 }  
 ?>  
 <!DOCTYPE html>  
 <html>  
      <head>  
           <title>Webslesson Tutorial | Insert and Display Images From Mysql Database in PHP</title>  
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
      </head>  
      <body>  
           <br /><br />  
           <div class="container" style="width:500px;">  
                <h3 align="center">Insert and Display Images From Mysql Database in PHP</h3>  
                <br />  
                <form method="post" enctype="multipart/form-data">  
                     <input type="file" name="image" id="image" />  
                     <br />  
                     <input type="submit" name="insert" id="insert" value="Insert" class="btn btn-info" />  
                </form>  
                <br />  
                <br />  
                <table class="table table-bordered">  
                     <tr>  
                          <th>Image</th>  
                     </tr>  
                <?php  
                $query = "SELECT * FROM tbl_images ORDER BY id DESC";  
                $result = mysqli_query($connect, $query);  
                while($row = mysqli_fetch_array($result))  
                {  
                     echo '  
                          <tr>  
                               <td>  
                                    <img src="data:image/jpeg;base64,'.base64_encode($row['name'] ).'" height="200" width="200" class="img-thumnail" />  
                               </td>  
                          </tr>  
                     ';  
                }  
                ?>  
                </table>  
           </div>  
      </body>  
 </html>  
 <script>  
 $(document).ready(function(){  
      $('#insert').click(function(){  
           var image_name = $('#image').val();  
           if(image_name == '')  
           {  
                alert("Please Select Image");  
                return false;  
           }  
           else  
           {  
                var extension = $('#image').val().split('.').pop().toLowerCase();  
                if(jQuery.inArray(extension, ['gif','png','jpg','jpeg']) == -1)  
                {  
                     alert('Invalid Image File');  
                     $('#image').val('');  
                     return false;  
                }  
           }  
      });  
 });  
 </script>  

2 comments:

  1. Hello sir, first of all thank you for this script. I loved all your videos. Great videos i ever saw, clean explanation of the code.. Looking for some some stuffs like this.. My question here is, once i upload images using above scripts, only the half portion of the images are displayed, Why so?? Thank you

    ReplyDelete