Upload Image without page refresh
 |
| Ajax image upload without page refresh |
Hi Friends Today we are going to learn how to upload and display image without page refresh using php,ajax and jquery..
also learn How to Upload large file in php
Just follow the below Jquery ajax example ..
 |
| Ajax image upload without page refresh |
1. index.html
<html>
<head>
<title>PHP AJAX Image Upload</title>
<link rel="stylesheet" href="styles.css" type="text/css"/>
<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>
<div class="content">
<h2>PHP Ajax Image Upload and Preview</h2>
<form id="uploadForm" method="post">
<table>
<tr>
<td><label>Upload Image File:</label></td>
<td><input name="Image" type="file" class="inputfield"/></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit" class="submit" /></td>
</tr>
</table>
</form><div id="success"></div>
</div>
</body>
</html>
2. script.js
$(document).ready(function (x) {
$("#uploadForm").on('submit',(function(x) {
x.preventDefault();
$.ajax({
url: "upload.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data)
{
$("#success").html(data);
},
});
}));
});
3. styles.css
.content {
margin:auto;
width: 440px;
height:141px;
background-color: black;
color:white;
box-shadow:3px 2px 3px 4px;
}
.content label{
font-weight: bold;
color: #A0A0A0;
}
#success{
width:200px;
height:200px;
background-color: #F0E8E0;
}
.submit {
padding:5px;
border-radius:5px;
background:black;
color: white;
}
.inputfield {
padding: 3px;
background-color: white;
}
4. upload.php
<?php
$folder="images/";
$path=$folder.basename($_FILES['Image']['name']);
$name=$_FILES['Image']['name'];
$upload=move_uploaded_file($_FILES['Image']['tmp_name'],$path);
$imgsrc="images/".$_FILES['Image']['name'];
if($upload==TRUE){
echo "<img src=$imgsrc width=200px height=200px /> ";
}else{
echo "Failed To Upload";
}
?>
That's it Friends how to Upload and display image without page refresh using php,ajax and jquery..
stay with us for more codes ..Thank you..
also Learn..
1. upload large file in php
2. AJAX Load data from database without page refresh
3. PHP Captcha System
4. AJAX 3 Level Dependent Menu(Country ,State,City)
No comments:
Post a Comment
Thank You for Your Comment
Note: Only a member of this blog may post a comment.