How To Upload Images To Mysql With PHP - Gudio Tutorial

    Social Items


Upload Images To Mysql With PHP

Hello everyone, see me again on this tutorial blog, Gudio Tutorial. And thanks to those of you who have visited my blog and if this is your first visit to my blog, this Gudio Tutorial is a blog that discusses programming, tips and tricks on blogs, android and others related to technology.

If you don't want to miss the article update from Gudio Tutorial, you can subscribe by entering your email address in the subscription box on the menu beside. So if there is an article update that I made on this blog, then you will get a notification email from Gudio Tutorial.

In this article I will give you a tutorial on How To Upload Images To Mysql With PHP. Where there are 3 steps we will do, namely:

  1. Creating a Database on MySQL
  2. Make HTML
  3. Creating a PHP Code

How? are you interested? I will go straight to the point of discussion.

Creating a Database on MySQL

To save images we need to create a database to store the images you upload. In this article I created a simple database. Create a database like below:

CREATE TABLE `tutorial_upload_picture`.`tbpic` ( `number` INT NOT NULL AUTO_INCREMENT , `filename` VARCHAR(100) NOT NULL , `imagetype` VARCHAR(20) NOT NULL , `image` MEDIUMBLOB NOT NULL , PRIMARY KEY (`number`)) ENGINE = InnoDB;


Make HTML

Now we will make the HTML, I will not design HTML with lots of CSS code, because in this tutorial, I will explain the basics. Please add CSS as you wish. Please, type the code below:


<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
<h2>Upload Image</h2>
<span>Please select your image by click button bellow:</span>
<br><br>
<form name="forminput" method="POST" enctype="multipart/form-data" action="saveimg.php">
<input type="file" name="upimg" id="upimg" accept=".jpg,.jpeg,.png" onchange="loadFile(event)">
<br><br>
<img id="show" name="show" width="200" height="200" >
<br><br>
<input type="submit" name="saveImg" id="saveImg" value="Upload Image">
</form>
<script>
var loadFile = function(event) {
 var image = document.getElementById('show');
 image.src = URL.createObjectURL(event.target.files[0]);
};
</script>
</body>
</html>

and save the code above with the name index.html

Creating a PHP Code

Create Connection Code
before we make the code to upload the image, we will make the connection code first so that the php that we created can connect to mysql.

<?php
   $hostname  = "localhost";
   $username  = "root";
   $password  = "";
   $dbname  = "tutorial_upload_picture";
   $db = new mysqli($hostname, $username, $password, $dbname);
?>

and save the code above with the name db.php


Creating a Code for Saving Images
After you create the database and HTML, now we will create the main code so that you can upload images to the database. Please, type the code below:

<?php
 include "db.php";

 if(isset($_POST['saveImg'])) {
  if($_FILES['upimg']['error'] == 0) {
   $filename = $_FILES['upimg']['name'];
   $imgtype = $_FILES['upimg']['type'];
   $tmpFile = fopen($_FILES['upimg']['tmp_name'], 'rb');
   $fileData = fread($tmpFile,filesize($_FILES['upimg']['tmp_name']));
   $fileData = addslashes($fileData);

   $query = "INSERT INTO tbpic (id,filename,imagetype,image) VALUES ('','$filename','$imgtype','$fileData')";
   $process = mysqli_query($db,$query);
   if($process) {
    //header('location:index.html');
    echo "
    <script type='text/javascript'>
     alert('Your image has been uploaded successfully');
     window.location.href = 'index.html'
    </script>";
   }else {
    echo "
    <script type='text/javascript'>
     alert('Your image failed to upload');
     window.location.href = 'index.html'
    </script>";
   }
  }
 }
?>

and save the code above with the name saveimg.php

If you want to download the source code in the tutorial above, please click on the link below


Tutorial Video

If you are not clear about this article, you can watch the video so that you can understand better.

Conclusion

How? Isn't it easy to make it? Hopefully the article How To Upload Images To Mysql With PHP that I made can give you benefits. And if my article is useful, you can share my article to social media that you have and don't forget to follow me on social media to get the latest updates from Gudio Tutorial.

We meet again at other times and with other interesting articles.

Regards,

How To Upload Images To Mysql With PHP


Upload Images To Mysql With PHP

Hello everyone, see me again on this tutorial blog, Gudio Tutorial. And thanks to those of you who have visited my blog and if this is your first visit to my blog, this Gudio Tutorial is a blog that discusses programming, tips and tricks on blogs, android and others related to technology.

If you don't want to miss the article update from Gudio Tutorial, you can subscribe by entering your email address in the subscription box on the menu beside. So if there is an article update that I made on this blog, then you will get a notification email from Gudio Tutorial.

In this article I will give you a tutorial on How To Upload Images To Mysql With PHP. Where there are 3 steps we will do, namely:

  1. Creating a Database on MySQL
  2. Make HTML
  3. Creating a PHP Code

How? are you interested? I will go straight to the point of discussion.

Creating a Database on MySQL

To save images we need to create a database to store the images you upload. In this article I created a simple database. Create a database like below:

CREATE TABLE `tutorial_upload_picture`.`tbpic` ( `number` INT NOT NULL AUTO_INCREMENT , `filename` VARCHAR(100) NOT NULL , `imagetype` VARCHAR(20) NOT NULL , `image` MEDIUMBLOB NOT NULL , PRIMARY KEY (`number`)) ENGINE = InnoDB;


Make HTML

Now we will make the HTML, I will not design HTML with lots of CSS code, because in this tutorial, I will explain the basics. Please add CSS as you wish. Please, type the code below:


<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
<h2>Upload Image</h2>
<span>Please select your image by click button bellow:</span>
<br><br>
<form name="forminput" method="POST" enctype="multipart/form-data" action="saveimg.php">
<input type="file" name="upimg" id="upimg" accept=".jpg,.jpeg,.png" onchange="loadFile(event)">
<br><br>
<img id="show" name="show" width="200" height="200" >
<br><br>
<input type="submit" name="saveImg" id="saveImg" value="Upload Image">
</form>
<script>
var loadFile = function(event) {
 var image = document.getElementById('show');
 image.src = URL.createObjectURL(event.target.files[0]);
};
</script>
</body>
</html>

and save the code above with the name index.html

Creating a PHP Code

Create Connection Code
before we make the code to upload the image, we will make the connection code first so that the php that we created can connect to mysql.

<?php
   $hostname  = "localhost";
   $username  = "root";
   $password  = "";
   $dbname  = "tutorial_upload_picture";
   $db = new mysqli($hostname, $username, $password, $dbname);
?>

and save the code above with the name db.php


Creating a Code for Saving Images
After you create the database and HTML, now we will create the main code so that you can upload images to the database. Please, type the code below:

<?php
 include "db.php";

 if(isset($_POST['saveImg'])) {
  if($_FILES['upimg']['error'] == 0) {
   $filename = $_FILES['upimg']['name'];
   $imgtype = $_FILES['upimg']['type'];
   $tmpFile = fopen($_FILES['upimg']['tmp_name'], 'rb');
   $fileData = fread($tmpFile,filesize($_FILES['upimg']['tmp_name']));
   $fileData = addslashes($fileData);

   $query = "INSERT INTO tbpic (id,filename,imagetype,image) VALUES ('','$filename','$imgtype','$fileData')";
   $process = mysqli_query($db,$query);
   if($process) {
    //header('location:index.html');
    echo "
    <script type='text/javascript'>
     alert('Your image has been uploaded successfully');
     window.location.href = 'index.html'
    </script>";
   }else {
    echo "
    <script type='text/javascript'>
     alert('Your image failed to upload');
     window.location.href = 'index.html'
    </script>";
   }
  }
 }
?>

and save the code above with the name saveimg.php

If you want to download the source code in the tutorial above, please click on the link below


Tutorial Video

If you are not clear about this article, you can watch the video so that you can understand better.

Conclusion

How? Isn't it easy to make it? Hopefully the article How To Upload Images To Mysql With PHP that I made can give you benefits. And if my article is useful, you can share my article to social media that you have and don't forget to follow me on social media to get the latest updates from Gudio Tutorial.

We meet again at other times and with other interesting articles.

Regards,
iklan related post
Load comments