We are going to learn how to upload image to the database using html as a front end and php as a scripting language. The filename will be saved in mysql database.

To upload image file to a folder and save its name to a database follow the following steps.

Or watch this video - https://www.youtube.com/watch?v=wvoUS_PUXMg

Step 1: Create Database

Create Database with this code

CREATE DATABASE uploadFile;

Step 2: Create Table

CREATE TABLE IF NOT EXISTS `uploadedimage` ( `Id` int(11) NOT NULL AUTO_INCREMENT,
  `imagename` varchar(100) NOT NULL,
  PRIMARY KEY (`Id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

The table has two columns for id and image name.

The id columns auto increments whenever an image uploads successfully.

The imagename column stores the name of the image like imagea.png

As shown the image name should not be more than 100 characters.

Step 3: Create Projects Folder in Your Server

Am using xampp as a local server

The main projects code which wil be shared below is saved in a folder called "uploadimage".

That folder is located inside htdocs folder.

Then the code is saved as uploadimage.php

Step 4: File Upload HTML, PHP and SQL Code

This is the complete source code Source Code that contains Html Php and Sql. https://github.com/mauricemuteti/Upload-And-Insert-Image-Into-Mysql-Database-Using-Php-Html

Just make sure the code is saved in htdocs folder i.e. if you are using xampp server. Also create images folder. imagesuploadedf. This is where your images will be saved.

Step 5: Open the Project in Your Browser

Make sure xampp server is started.

Open your projects location in your browser. In this case the url should be :

<a href="http://localhost/uploadimage/uploadimage.php">http://localhost/uploadimage/uploadimage.php</a>

Click browse and locate the image file you want to upload then click open.

The file path is displayed on your browser.

This means the image is selected.

click upload button and if the image is uploaded you should see "image uploaded" message on your browser.

Step 6: Check Your Images Folder

This is where the uploaded images are stored.

Go to C:\xampp\htdocs\uploadimage\imagesuploadedf and you should see you image file there.

Step 7: Check Your Mysql Database for New Row

The image name is added to mysql database (Table) with an Id.

If its your first image the Id is supposed to be (1).

Introduction: How to Upload and Insert Image Into Mysql Database Using Php And Html