Hello Friends,
In this blog post, I am going to show an existing functionality of image upload using a form with the help of PHP and jquery.
Often you would have seen the option of image upload while filling your college, office, interview form. Here you upload your image and submit with the form.
this functionality is very important once we have to collect the image of our users and any other things depend on the context of the requirement.
You can also use this image upload functionality as your school project and show it as a collection of images would also take over to form an image gallery.
So How to build this functionality?
Friends, this is a very simple to build just follow the below-given procedure step by step and you will be finished with an image upload code or software.
Software used for building this project:
Net Beans IDE
Xampp Server
We used this above software for this project though you can use any software supporting PHP, HTML, Jquery or that you are familiar with.
File Structure:
See the image below.
As per the above file structure, you just make a PHP project name as image upload or you can have any name as per your requirement.
Now create all the files as shown in the above file structure. You can rename the pages but make sure to change the same in the code given below.
You will also need to create one folder name as upload folder. See the file structure image for the same.
You will also need to download one delete icon image and copy it to your project.
Now just place this below-given code into the respective files and run your project by running the upload.php file.
Upload.php
<!DOCTYPE html>
<html>
<head>
<title>Upload Image using form</title>
<link href="style.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="imageupload.js"></script>
</head>
<body>
<div id="mainform">
<div id="innerdiv">
<h2>Upload Image using form</h2>
<!-- Required Div Starts Here -->
<div id="formdiv">
<h3>Upload Image Form</h3>
<form action="" enctype="multipart/form-data" id="form" method="post" name="form">
<div id="upload">
<input type="file" name="file" accept="image/*">
</div>
<input id="submit" name="submit" type="submit" value="Upload">
</form>
<br>
<div id="detail">
<ul>
<li>You can upload only- <b>(jpeg,jpg,png) images.</b></li>
<li>Image size < 100kb.</li>
</ul>
</div>
</div>
<div id="clear"></div>
<div id="preview">
<img id="previewimg" src=""><img id="deleteimg" src="delete.png">
<span class="pre">IMAGE PREVIEW</span>
</div>
<div id="message">
<?php include 'imageupload.php';?>
</div>
</div>
</div>
</body>
</html>Imageuplaod.php
<?php
if (isset($_POST['submit'])) {
$validextensions = array("jpeg", "jpg", "png");
$temporary = explode(".", $_FILES["file"]["name"]);
$file_extension = end($temporary);
if ((($_FILES["file"]["type"] == "image/png") || ($_FILES["file"]["type"] == "image/jpg") || ($_FILES["file"]["type"] == "image/jpeg")
) && ($_FILES["file"]["size"] < 100000)//Approx. 100kb files can be uploaded.
&& in_array($file_extension, $validextensions)) {
if ($_FILES["file"]["error"] > 0) {
echo "Return Code: " . $_FILES["file"]["error"] . "<br/><br/>";
} else {
echo "<span>Your File Uploaded Succesfully...!!</span><br/>";
echo "<br/><b>File Name:</b> " . $_FILES["file"]["name"] . "<br>";
echo "<b>Type:</b> " . $_FILES["file"]["type"] . "<br>";
echo "<b>Size:</b> " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
echo "<b>Temp file:</b> " . $_FILES["file"]["tmp_name"] . "<br>";
if (file_exists("upload/" . $_FILES["file"]["name"])) {
echo $_FILES["file"]["name"] . " <b>already exists.</b> ";
} else {
move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" . $_FILES["file"]["name"]);
$imgFullpath = "http://".$_SERVER['SERVER_NAME'].dirname($_SERVER["REQUEST_URI"].'?').'/'. "upload/" . $_FILES["file"]["name"];
echo "<b>Stored in:</b><a href = '$imgFullpath' target='_blank'> " .$imgFullpath.'<a>';
}
}
} else {
echo "<span>***Invalid file Size or Type***<span>";
}
}
?>Imageuplaod.js
$(document).ready(function() {
// Function for Preview Image.
$(function() {
$(":file").change(function() {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
}
});
});
function imageIsLoaded(e) {
$('#message').css("display", "none");
$('#preview').css("display", "block");
$('#previewimg').attr('src', e.target.result);
};
// Function for Deleting Preview Image.
$("#deleteimg").click(function() {
$('#preview').css("display", "none");
$('#file').val("");
});
// Function for Displaying Details of Uploaded Image.
$("#submit").click(function() {
$('#preview').css("display", "none");
$('#message').css("display", "block");
});
});Style.css
@import "http://fonts.googleapis.com/css?family=Droid+Sans";
/* Above is to load Google Fonts in our page.*/
#mainform{
width:960px;
margin:30px auto;
padding-top:20px;
font-family:'Droid Sans',sans-serif
}
#mainform h2{
margin-left:95px
}
#innerdiv{
float:left;
width:60%;
height:575px;
padding:10px 30px 30px
}
#formdiv{
background-color:#fff;
color:#123456;
box-shadow:0 1px 1px 1px gray;
width:480px;
margin:50px 0 0;
height:300px
}
h3{
margin-top:0;
color:#fff;
background-color:#182d69;
text-align:center;
width:100%;
height:50px;
padding-top:30px
}
input[type=submit]{
background-color:#182d69;
border:1px solid #fff;
font-weight:700;
font-size:18px;
color:#fff;
width:150px;
height:30px;
border-radius:3px;
padding:2px;
box-shadow:0 1px 1px 0 #a9a9a9;
margin-left:20px
}
#form{
width:43%;
float:left
}
#preview{
height:180px;
width:180px;
text-align:center;
margin:20px;
display:none
}
.pre{
margin-right:20px;
font-size:13px
}
#previewimg{
height:140px;
width:140px;
float:left;
padding:8px;
border:1px solid #e4d3c3;
margin-bottom:5px
}
#file{
opacity:0;
width:115px;
height:115px
}
#upload{
width:115px;
height:115px;
background-image:url(abc.png);
background-repeat:no-repeat;
margin-left:35px;
box-shadow:0 0 10px grey;
background-position:5px
}
#message{
width:100%;
font-size:14px;
color:#123456;
margin-top:-90px;
float:left;
margin:15px
}
#message span{
color:red;
font-size:15px
}
#detail{
line-height:20px;
float:left;
width:270px;
font-size:14px
}
ul{
margin-left:-25px
}
#textmessage{
float:right;
width:50%;
margin:15px 85px 0 0
}
div#img{
width:200px;
height:200px
}
#imageupload{
width:150px;
height:150px
}
#deleteimg{
cursor:pointer;
float:right;
margin-top:-175px;
margin-right:10px
}In a case of any queries, you can write us at anurag@a5theory.com we will get back to you ASAP.
Hope! you would have enjoyed this post.
Please feel free to give your important feedbacks in the comment section below.
Have a great time! Sayonara!
