Google profile style Image Uploader Script with PHP and jQuery

A Member request us, How to create a Google profile photo update style Image uploader using PHP and jQuery. Here is the solution for the Image Uploader like Google Profiles Change Photo Style

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.

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