PHP Image Uploader

Before Uploading:

After Uploading:

CODE EXPLANATION:

CSS:

.img {
border: 1px outset white;
background-color: white;
text-align: center;
width: 500px;
height: 500px;
margin-left: 400px;
}

the border,background color,text-align,width,height,margin parameters are set for the div tag.

HTML:

div class="img"
h3 Upload your image /h3
 form action="upload.php" method="post" enctype="multipart/form-data"
input type="file" name="fileToUpload" id="fileToUpload"
input type="submit" value="Upload Image" name="submit"
/form
/div

img is the class name used for div tag.

the above code uses a form to prompt the user to upload file.

input  type file accepts any sorts of images and a upload image button acts as submit.

Php:

$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));

the above code is for setting a directory called uploads to save the uploaded files there.

NOTE: You will have to create a directory called uploads wherever your upload.php file resides.

$imagefiletype holds the file extension in lower case. 

if (file_exists($target_file)) {
  echo "Sorry, file already exists.";
  $uploadOk = 0;
}

the above code checks if the file already exists in directory.

if ($_FILES["fileToUpload"]["size"] > 500000) {
  echo "Sorry, your file is too large.";
  $uploadOk = 0;
}

the above code limits the image size for 500 kb.