A5THEORY

Your expectations are our responsibilities.

A5THEORY
image_upload_feature_img
Blogging JAVA SCRIPT & JQUERY PHP 

How to Upload Images with PHP and Jquery Using Form?

Anurag , , , , , , , , , , , , , , , , , , , , , , , , , , ,

Hello Friends, In this blog post(How to Upload Image with PHP and JQuery Using Form), I am going to show an existing functionality of uploading Images using a form with the help of PHP and jQuery.

Using this blog(How to Upload Image with PHP and Jquery Using Form) we will explore How can we create images and file uploads in PHP using jQuery Ajax. Can I use jQuery in PHP? What are the $_ files in PHP? How can I upload a file without a form? ………..

….Upload image ajax jQuery, PHP MySQL, Upload file using Ajax in PHP example, Ajax form submit with file upload in PHP, Upload image using jQuery ajax, Upload image using Ajax without form, How to insert image in database using Ajax in PHP|How to Upload Image with PHP and Jquery Using Form|

Often you would have seen the option of uploading Images while filling out your college, office, and interview form. Here you upload the image and submit the form|How to Upload Image with PHP and Jquery Using Form|

this functionality is very important once we have to collect the image of our users and any other things depending on the context of the requirement|How to Upload Image with PHP and Jquery Using Form|

You can also use this upload Image functionality as your school project and show it as a collection of images that would also take over to form an image gallery|How to Upload Image with PHP and JQuery Using Form|

So How to build this functionality of uploading images?

Friends, this is very simple to build upload image functionality 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 upload image project:

Net Beans IDE
Xampp Server

We used the 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.

imageuploadfilestr

As per the above file structure, you just make a PHP project name as an 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 an 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

[code]

<!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>
[/code]
Imageuplaod.php

[code]

<?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 Successfully...!!</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>";
}
}
?>
[/code]
Imageuplaod.js

[code]
$(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");
});
});
[/code]
Style.css

[code]
@import "http://fonts.googleapis.com/css?family=Droid+Sans";
/* Above is to load Google Fonts on 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
}
[/code]

you can also go through a few more related blog links below:

PHP Interview Questions For Intermediate In Hindi…

PHP Interview Questions For Freshers In Hindi…

PHP Interview Questions In Hindi…

User Registration Form Using PHP & HTML…

PHP Email Verification Script For Downloading E-Book…

Login Form: Simple PHP Login Form With Session…

How to Show Progress Bar On Form Submission Using JQuery…

Make Your First PHP Program…

How to install XAMPP Server on your local computer…

This Keyword In PHP In Hindi…

Getter And Setter Method In PHP In Hindi…

Conclusion:

We have gone through How we create images and file uploads in PHP using jQuery Ajax. Can I use jQuery in PHP? What are the $_ files in PHP? How can I upload a file without a form? Upload image Ajax jQuery, PHP MySQL, Upload file using Ajax in PHP example, Ajax form submit with file upload in PHP, Upload image using jQuery ajax, Upload image using Ajax without form, How to insert image in database using Ajax in PHP|How to Upload Image with PHP and Jquery Using Form|

In case of any queries, you can write to us at a5theorys@gmail.com we will get back to you ASAP|How to Upload Image with PHP and JQuery Using Form|

Hope! you would have enjoyed this post on How to Upload Images with PHP and JQuery using Form.

Please feel free to give your important feedback in the comment section below|How to Upload Image with PHP and Jquery Using Form|

Have a great time! Sayonara!

Anurag

I am a blogger by passion, a software engineer by profession, a singer by consideration and rest of things that I do is for my destination.