A warm welcome, Developers! In this tutorial, we’ll now study how to enable image upload to the folder. In this procedure, we’re not dealing with the database, everything is done by php code.
Now, We do not need to write a Connection file as there’s no role of database.
Design the form
Lets first design a form for photo upload. Make the File display.html and paste the following code in it.
<html>
<head>
<link rel="stylesheet" href="styling.css">
<title>Image Upload Tutorial</title>
</head>
<body>
<center>
<h1>Php Photo Upload Tutorial</h1>
<form action="upload.php" method="post" enctype="multipart/form-data">
<h3>Select image to upload:</h3>
<input class="button button2" type="file" name="fileToUpload" id="fileToUpload" required="required">
<input class="button button2" type="submit" value="Upload Image" name="submit">
</form>
<h2 class="heading">Technopoints</h2>
<a href="https://technopoints.co.in">https://technopoints.co.in</a></h2>
</center>
</body>
</html>
We are here using the css for the better UI. create file styling.css and paste following code in it.
h1 {
color: orange;
text-shadow: 3px 2px LightGray;
}
h3{
color: Tomato;
}
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button2 {
background-color: white;
color: black;
border: 2px solid #008CBA;
}
.button2:hover {
background-color: #008CBA;
color: white;
}
p{
color: Tomato;
}
h4 {
color: MediumSeaGreen;
}
h2.heading{
color: Violet;
}
p.link{
color: DodgerBlue;
}
You’ll see the following look after opening the file display.html.
Back end code for image upload to folder
Now lets start a php code. So make file upload.php with the following code in it. We are not creating a database here because there’s no need in this case. We are simply uploading the picture to the folder without using a database relation. But you can add it and see the further tutorial here.
<html>
<head>
<link rel="stylesheet" href="styling.css">
</head>
<body>
<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
if($check !== false) {
echo "";
$uploadOk = 1;
} else {
echo "<center>File is not an image.</center>";
$uploadOk = 0;
}
}
// Check if file already exists
if (file_exists($target_file)) {
echo "<center>Sorry, file already exists.</center>";
$uploadOk = 0;
}
// Check file size
if ($_FILES["fileToUpload"]["size"] > 500000) {
echo "<center>Sorry, your file is too large.</center>";
$uploadOk = 0;
}
// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
echo "<center>Sorry, only JPG, JPEG, PNG & GIF files are allowed.</center>";
$uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
echo "<center>Sorry, your file was not uploaded.</center>";
// if everything is ok, try to upload file
} else {
if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
echo "<center><i><h4>The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.</h4></i></center>";
} else {
echo "<center>Sorry, there was an error uploading your file.</font></center>";
}
}
?>
</body>
</html>
Now we are done with the code. Just create a folder named uploads in the same directory where you put all these above files. The folder will contain the images which we uploaded. Check that folder after success message.
This code is able to check whether the uploaded file is valid image or not. see the screenshot below.
We’ll get a confirmation message as follows if the data upload becomes successful.
Don’t forget to share this tutorial if find helpful 🙂
Alternatively, you can always download the source code from the following link.