Upload image file and display in HTML – PHP


Here in this article, I am going to show you how to upload image files from our computer and show inside HTML page. I will try to make this tutorial as simple as possible so that there won’t be any problem to understand even for absolute beginners. So let’s get started.

What we are going to do

Here in this project, we are going to make one folder named “imageUpload” which will contain our PHP file and a folder where the uploaded images will be saved.
In this project, the page will have one file type input and a button. Clicking on the button the selected image will be uploaded.
To display the images we are going to select all images from our upload directory.
For simplicity, we are going to do it in one single PHP page. So here we only have one PHP file which will contain both HTML and PHP code. IF you want then you can easily create a separate PHP file for the PHP codes. I am going to use a local server to host my pages and files.

How we are going to do it

At first, make a folder for your project. I am naming it as ‘imageUpload’. If you are on Linux don’t forget to give read and write permission to the folder. Now open the “imageUplaod” folder and make the PHP file and name it as “addImage.php”. We also need a folder to store our uploaded image. So make the folder and name it as “uploads“.


Now open addImage.php and copy paste the following HTML code:

Now open the page in a browser. Your page will look something like this:


After adding the HTML code, it is time to add the PHP code for our Choose File and Upload button.

From the above code, you can see I have not added any validation as of now. I am going write a separate article for you on PHP image uploading with validation.
Now that you have added the PHP code, try to select an image from your computer and click upload. I have uploaded three pictures and now my page looks like this:


The work is almost done. To make it look a little bit nicer I am applying some CSS code.

Picture Credit: RyanMcGuire, ThomasWolter, Free-Photos.

That is all. This is how the page looks like with a border around the image and margin gap:

Putting it all together

You May Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *