Ajax image upload without form submit and without page refresh

If You are looking for upload an image without submitting the form and with out refresh the page using jQuery, then this tutorial will usefull for you. I had implemented this ajax image upload program using 'ajaxfileupload' plugin, 'jquery' and PHP code for uploading images. By using following code you can upload image to the server. Click here to download "Ajax Image Upload" code.

Step 1:

Include Jquery plugin and ajaxfileupload plugin You can these plugins here. Example:

 
 <script src="js/jquery.min.js"></script>
 <script src="js/ajaxfileupload.js" type="text/javascript"></script>
 

Step 2:

Create form and input type 'file' and call a user defined function (showPreviewImage()) onchange action of that input type file. Example:

  

<form action="index.php" method="post" enctype="multipart/form-data">
  <input type="file" name="photo" id="photo" onchange="showPreviewImage('photo')" /><br />
  <span id="loader" style="display:none;"><img src="spinner.gif"></span>
  <div id="preview"></div>
 </form>


  

Step 3:

This is the important step.Create a function e.g showPreviewImage() this function will fired on chage of input type file . Here we will call a php file using jquery ajax e.g (upload.php) and write php image upload code there. Example:

 function showPreviewImage(imgId){                               
 $('#loader').show();
 var imgName=$('#photo').val();
 prevUrl="upload.php"      
 $.ajaxFileUpload({
  url:prevUrl,
  secureuri:false,
  fileElementId:imgId,
  dataType: 'json',
  complete: function (data, status){
   var z=data.responseText.replace(new RegExp("

"),'');
    if(z.indexOf('.')>0){
     $('#loader').hide();
     $("#preview").html("<img src='images/"+z+"' width='100'>");
   }else{
    $('#loader').hide();
    $("#preview").html(z);
   }    
  }                                  
 }); 
}

To get complete code click here.