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();
}
?>
