upload image without page refresh in php ajax and jquery
 |
| upload image without page refresh in php ajax and jquery |
Hi Friends today we are going to learn how to upload image without page refresh using php,ajax and jquery..
just follow the below step to learn how to upload image without page refresh..
=>File Structure:
 |
| upload image without page refresh in php ajax and jquery |
Create 3 files and 1 folder
1. index.html
2. script.js
3. upload.php
4. images
Copy and save the below codes for your different file...
1. index.html
<html> <head> <title>PHP AJAX Image Upload</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <h2>PHP AJAX Image Upload without page Refresh</h2> <form id="uploadForm" method="post"> <table cellspacing="0"> <tr> <td>Upload Image File:</td> <td><input name="Image" type="file" class="inputFile" /></td> </tr> <tr> <td></td> <td><input type="submit" value="Upload" class="btnSubmit" /></td> </tr> </table> </form> </body> <div id="success"></div> </html>
2. script.js
$(document).ready(function (e) {
$("#uploadForm").on('submit',(function(e) {
e.preventDefault();
$.ajax({
url: "upload.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data)
{
$("#success").html(data);
},
error: function()
{
}
});
}));
});
3. upload.php
<?php
//Target Path
$target="images/";
$path=$target.basename($_FILES['Image']['name']);
$name=$_FILES['Image']['name'];
$upload=move_uploaded_file($_FILES['Image']['tmp_name'],$path);
if($upload==TRUE){
echo "Your Image <font color=green size=4><b>$name </b></font> Successfully Uploaded";
}else{
echo "<font style=color:red size=5>Failed To Upload</font>";
}
?>
That's it Friends How to upload image without page refresh using php,ajax and jquery..Thank You..
No comments:
Post a Comment
Thank You for Your Comment
Note: Only a member of this blog may post a comment.