Tuesday 25 September 2018

Store and retrieve image from database using PHP and MySQL

Upload and store an image into the database and later retrieve that image from the database is very easy and simple. But before store into the database table, the image should be encoded using base64_encode() function. So, in this tutorial, I will show you how to store and retrieve image from database using PHP and MySQL. Also, you can learn from this tutorial about how to use base64_encode() to encode an image before upload to the database table.
You can test the live demo example on store and retrieve image from database using PHP and MySQL as well as can download the full source code from the download link.


Upload Image To The Server (index.php)

  1. <form action="" method="post" id="form" enctype="multipart/form-data">
  2. Upload image :
  3. <input type="file" name="uploadFile" value="" />
  4. <input type="submit" name="submitBtn" value="Upload" />
  5. </form>
The above HTML code simply allows users to browse and choose an image from the local disk and upload it to the server.

Store Image Into The Database (index.php)

  1. if(isset($_POST['submitBtn']) && !empty($_POST['submitBtn'])) {
  2. if(isset($_FILES['uploadFile']['name']) && !empty($_FILES['uploadFile']['name'])) {
  3. //Allowed file type
  4. $allowed_extensions = array("jpg","jpeg","png","gif");
  5. //File extension
  6. $ext = strtolower(pathinfo($_FILES['uploadFile']['name'], PATHINFO_EXTENSION));
  7. //Check extension
  8. if(in_array($ext, $allowed_extensions)) {
  9. //Convert image to base64
  10. $encoded_image = base64_encode(file_get_contents($_FILES['uploadFile']['tmp_name']));
  11. $encoded_image = 'data:image/' . $ext . ';base64,' . $encoded_image;
  12. $query = "insert into `images` set `encoded_image` = '".$encoded_image."'";
  13. mysqli_query($con, $query);
  14. echo "File name : " . $_FILES['uploadFile']['name'];
  15. echo "<br>";
  16. if(mysqli_affected_rows($con) > 0) {
  17. echo "Status : Uploaded";
  18. $last_insert_id = mysqli_insert_id($con);
  19. } else {
  20. echo "Status : Failed to upload!";
  21. }
  22. } else {
  23. echo "File not allowed";
  24. }
  25. }
  26. }

Example Explained

Apart from uploading, converting image into base4_encode and saving into database we also performing server side validation of the image.
$allowed_extensions = array(“jpg”,”jpeg”,”png”,”gif”) – Allowed image type that are to be uploaded.
$ext = strtolower(pathinfo($_FILES[‘uploadFile’][‘name’], PATHINFO_EXTENSION))  – Rteurns extension of the image in lowercase letter.
in_array($ext, $allowed_extensions) – It returns true if any match found otherwise returns false.
$encoded_image = base64_encode(file_get_contents($_FILES[‘uploadFile’][‘tmp_name’])) – Convert the image into base64 encoding format.
$encoded_image = ‘data:image/’ . $ext . ‘;base64,’ . $encoded_image – Prepend the data:image/jpg;base64 before the base64 encoded string. It is not necesary to do that here. You can also prepend the above string before the base64 encoded string in the src attribute of the <img /> tag.
$last_insert_id = mysqli_insert_id($con)  – It returns the id of the last inserted row from the database table.

Retrieve Image From The Database (index.php)

  1. <?php
  2. if($last_insert_id) {
  3. $query = "select `encoded_image` from `images` where `id`= ". $last_insert_id;
  4. $result = mysqli_query($con, $query);
  5. if(mysqli_num_rows($result) == 1) {
  6. $row = mysqli_fetch_object($result);
  7. echo "<br><br>";
  8. echo '<img src="'.$row->encoded_image.'" width="250">';
  9. }
  10. }
  11. ?>
The above PHP code retrieves the record from the database table based on the id of the last inserted row. If anything returned then display the image on the web page.

Complete Source Code – Store and retrieve image from database using PHP and MySQL

Download the full source code from the below download link. Also, you can test and enjoy the live demo example on Store and retrieve image from database using PHP and MySQL. Please like and share the tutorial with others.

0 comments:

Post a Comment