How to Upload Images to a Website Using PHP
In this article, we show how to upload images to a website using PHP.
With this upload feature, you can upload images to whatever folder you specify in the code. Once you have an image selected to upload, you press the 'Upload' button. The image is then uploaded to the folder that you can specify. You can then display this image by the HTML <image> tag.
This is exactly what is done above.
We created a file upload box in HTML and then we added PHP to give functionality to the textbox so that an actual upload can occur. Once we have the image uploaded, we can then display the image through some simple PHP code. So if you upload an image above, then click the 'Upload' button, you will see the image you uploaded right below.
We also added some code to the PHP so that only certain types of files can be uploaded. For example, certain files are always images, such as .jpg, .jpeg, .png, and .bmp. Other type of files such as text files (.txt), pdf files (.pdf), word files (.doc) are not images. Therefore, this file upload would reject them. We want only images uploaded. So we added this PHP code so that certain files, which are definitely not images, cannot be uploaded.
So below we go over how to do this.
HTML Code
So below we will start with the HTML code needed to create the file upload form.
So the HTML shown above is very basic.
We create a form, a file upload form. We set the action equal to "". This is because we want all the information obtained from the form to remain at this page. We set the method equal to POST, because it's a large amount of data and we don't want the data appended to a URL. We want the data in an actual location, which is where we're uploading the image file to. The enctype statement is unique and needed for file uploads. It must be present.
The next line creates a file upload button. We name it "file".
The next line creates a submit button. Since it's an upload button, we name it "Upload".
We then end the form.
This is all the HTML code needed. The HTML simply creates the upload form.
The PHP code shown below is what actually adds functionality to the upload form so that it actually performs
an upload.
PHP Code
There are 2 PHP blocks of code to make this image upload work.
The first and the biggest block is shown below.
So this is obviously a big block of code. We'll explain it all now below.
The $name variable stores the name of the file being uploaded. This includes the name of the file plus its extension. So if upload an image named clown and its of the format jpg, the $name variable stores clown.jpg.
The $tmp_name stores the temporary name of the file. When we first upload the file, it isn't carried over directly to the final destination, which is the folder we want it transferred to. Instead, it gets a temporary. We then have to use the function, move_uploaded_file() to transfer the file using the temporary name to its final destination folder. So, again, the variable $tmp_name is very important for uploading the file.
The next variable we have is $position. This variable holds the position of the period in the file name. We find the position of the period, because after the period is the file extension. Once we know the position of the period, we know what comes after the period is the file extension. We want to know the file extension to know whether the file is an image or not. The image files that this upload form accepts are jpg, jpeg, png, and bmp. Any other file extension isn't accepted by this upload form.
So we have the variable position, which we find with the strpos() function. Next we use the substr() function and get the full extension. The substr() function takes the part of a string after a certain point. So we take the part of the string after the period. This gives us the file extension. We store this value in the variable $fileextension.
Next, we make the file extension lower case. We do this because when we later use if statements to determine whether the file is an acceptable image file or not, we just have to compare lowercase characters, without having to worry whether the file extension may be capitalized or not. This makes the if statements straightforward.
The variable $path makes the image file uploaded to the images folder. Later on, we just have to append to the images folder the file name of the image so that we establish the complete pathway to the image file.
The line, if (isset($name)) checks to see whether the submit button has been clicked. If it has been clicked, the $name variable will be set.
We then use the line, if (empty($name)), to determine once the submit button has been clicked whether the $name variable contains anything or not. If the user simply pressed the 'Upload' button without specifying a file, the $name variable will be empty. If the user pressed the 'Upload' button while specifying a file, the $name variable will have something.
So if the $name variable is empty, no file has specified by the user. So we output the statement, "Please choose a file".
Else, if the $name variable is not empty but the file extension isn't jpg, jpeg, png, or bmp, we output the statement, "The file extension must be .jpg, .jpeg, .png, or .bmp in order to be uploaded".
Else, if the $name variable is not empty and the file extension is either jpg, jpeg, png, or bmp, we output the statement, "Uploaded". During this stage, we use the function, (move_uploaded_file($tmp_name, $path.$name)) to upload the file using the temporary name created to its permanent location. Its permanent location will be its current folder, in the images folders. Right now, you're viewing the website from, http://www.learningaboutelectronics.com/Articles/
So the image will be located at, in the images folder in the Articles folder.
This completes the first block of PHP code.
The second block of PHP code is shown below.
So this block of PHP code is much smaller.
If the file extension is either jpg, jpeg, png, or bmp, the statement is output, "The image you uploaded is shown below." The image is then shown below.
So this is all that is required to upload images and how to display them. It isn't particularly hard once you know what you're doing.
You can always modify the code to fix your needs. For example, you may only want to accept jpg formats. In that case, you would erase the lines pertaining to .png or .bmp extensions. You may want to add more image formats, because there are plenty of others available. In that case, you would just add them to the code.
If you want to see how to restrict the size of the file being uploaded, see
How to Restrict the Size of a File Upload with PHP.
Related Resources
How to Upload Files to a Website Using PHP
How to Upload Videos to a Website Using PHP