Change/Update Photo with Ajax Image Uploader

A Member request us, How to create a Google Profile Like: Ajax Image Photo Uploader to Change/Update Photo with Ajax Image Uploader using PHP and jQuery. Here is the solution for the Image Uploader like Google Profile Style Ajax Image Uploader

In this example I have use HTML Input file object replacer "prettyfile plugin".
here you can download the jQuery prettyFile Plugin and Use the following code to replace a file input like a "Update Photo" link. and Turn your interface look like a Google Profile Photo update page with PHP Ajax Uploader without refreshing the page. Change/Update Photo with Ajax Image Uploader

Place the PHP Server Side Process on Page Top:

<?php session_start();

if(isset($_SESSION['updated_image']))
$existing_image=$_SESSION['updated_image'];
else
$existing_image='unknown.jpeg';


if(isset($_POST['image_process']))
{
 echo "<pre>";
 $filename=$_FILES['profile_photo']['name'];
 // Check whether the Uploaded file is Image file
 if(preg_match("/^[a-zA-Z0-9-_\.]+\.(jpg|gif|png|jpeg)$/",$filename))
 {
  // Check the Uploaded Image size is Less than or equal to 100 KB ( 1 KB == 1024 Bytes)
  if($_FILES['profile_photo']['size']<=102400)
  {
   $file_ext=end(explode(".",$filename));
   $filename="profile-".time().".$file_ext";
   if(move_uploaded_file($_FILES['profile_photo']['tmp_name'],"images/$filename"))   
   {
    $_SESSION['updated_image']=$filename;
   // Push Javascript Message on top Window  
   ?>
   <script type="text/javascript">
   window.top.window.top.UploadStatus(0,'<?=$filename?>');
   </script>
   <?php     
   }else
   {
   // Push Javascript Message on top Window  
   ?>
   <script type="text/javascript">
   window.top.window.top.UploadStatus(3);
   </script>
   <?php    
   }
   
  }else
  {
   // Push Javascript Message on top Window
  ?>
        <script type="text/javascript">
  window.top.window.top.UploadStatus(2);
  </script>
        <?php   
  }
 }else
 {
   // Push Javascript Message on top Window  
  ?>
        <script type="text/javascript">
  window.top.window.top.UploadStatus(1);
  </script>
        <?php
 }
 exit();
}


?>

And use the following styles to make appear the photo look cool

body {
 margin-left: 10px;
 margin-top: 10px;
 font-family:Tahoma, Geneva, sans-serif;
}

#imagecontainer
{
 width:175px;
 height:200px;
 padding:10px; margin:10px;
 border:1px solid #CCC;
}

#profile_image
{
 height:175px;
 border:1px solid #EEE;
 overflow:hidden;
}

#profile_image .loader
{
 position:relative;
 top:50%;
 left:50%;
 width:16px;
 height:16px;
 margin-left:-8px;
 margin-top:-8px;
 background:url(images/ajax-loader.gif) no-repeat;
 z-index:100;
}

#profile_image img{width:175px; height:auto;}

#update
{
 padding:2px;
 padding-top:5px;
 text-align:center;
 font-size:11px; color:#06C;
}

Place the Photo Box on html Page 

<!--

when image is unknown
<img src="images/unknown.jpeg" />

When Uplad Process..
<div class="loader"></div>
-->
<div id="imagecontainer">
<div id="profile_image">
<?php
if(isset($_SESSION['updated_image']))
$existing_image=$_SESSION['updated_image'];
else
$existing_image='unknown.jpeg';
?>
<img src="images/<?=$existing_image?>" />
</div>

Place a form as per the following 

<form target="_uploader" name="uploader_form" id="uploader_form" method="post" enctype="multipart/form-data">
<input name="profile_photo" type="file" id="profile_photo"  />
<input type="hidden" name="image_process" value="process" />
</form>

Place a Hidden Iframe for Image Upload with the name "_uploader" 
(which is the name on form target)

<iframe name="_uploader" src="about:blank" style="display:none;"></iframe>

Place a Javascript for Process the Input File to Link and Upload Event:

$("#profile_photo").change(function(){
 //Detect the File Name change and submit upload form
 // Target of the form _uploader to reach the hidden iframe name _uploader
 $("#uploader_form").submit();
 // After submitting call loader image on image slot
 $("#profile_image").empty().html('<div class="loader"></div>');
})

$(function(){

$("#profile_photo").prettyfile({
setvalue: false,
html: '<div id="update">Update Photo</div>'
});
});


function UploadStatus(response,img)
{
 if(img=='undefined')
 img=null;
 
 switch(response)
 {
  case 0:
  $("#profile_image").empty().html('<img src="images/'+ img +' />');  
  break;
  
  case 1:
  alert("Select a valid Image file ");
  $("#profile_image").empty().html('<img src="images/<?=$existing_image?>" />');
  break;
  
  case 2:
  alert("Image size is too large : Must with in 100 KB");
  $("#profile_image").empty().html('<img src="images/<?=$existing_image?>" />');  
  break;
  
  case 3:
  alert("Error : Uploading Image please try again !");
  $("#profile_image").empty().html('<img src="images/<?=$existing_image?>" />');  
  break;  
 }
}

Live Demo

Download Script