upload image without page refresh in php ajax and jquery - Web Development and Web Design Codes

Latest

Tuesday, February 13, 2018

upload image without page refresh in php ajax and jquery

upload image without page refresh in php ajax and jquery

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
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