Change/Update Photo with Ajax Image Uploader

Monday, September 12, 2011


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


Download This Script    Live Demo    Download Script



3 comments:

Anonymous said...

Why i have to reload the page to see the updated picture?

Swami Shirsath said...

not erplied :-(

Anonymous said...

Why i have to reload the page to see the updated picture?

actually you don't have to.
if you want to load image without reloading get the uploaded image url via ajax and change the src of the img element.

Post a Comment