top_menu

Sunday, 23 September 2012

Asynchronous photo upload and resize using jquery, ajax and php

.

In this tutorial i'm going to explain you, how to upload, resize and store images using jquery, ajax, php using some simple lines of code

This script will upload 4 versions of an image into the web server's file system (original size;160 x 250; 87 x 87; 35 x 35). And the best part is, it will do the job asynchronously keeping a better user experience. It will also reduce the image size and will serve only the required image to the user.

The stored images will be in the following format
SIZE_USERID_RANDOM-NUMBER

image resize using php

 
Setting up the database to store the image locations (db.php)
<?php
define('DB_SERVER', 'YOUR_DATABASE_SERVER');
define('DB_USERNAME', 'YOUR_DATABASE_USERNAME');
define('DB_PASSWORD', 'YOUR_DATABASE_PASSWORD');
define('DB_DATABASE', 'YOUR_DATABASE_NAME');
$connection = mysql_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD) or die(mysql_error());
$database = mysql_select_db(DB_DATABASE) or die(mysql_error());
?>

Creating the tables required
CREATE TABLE IF NOT EXISTS `photoupload` (
  `uid` int(11) NOT NULL,
  `username` varchar(200) NOT NULL,
  `profile_image` varchar(200) NOT NULL
);
 



INSERT INTO `photoupload` (`uid`, `username`, `profile_image`) VALUES

(100, '2lessons', 'donald-duck.jpg');
The index.php page
<?php
$profimg="photos/donald-duck.jpg";
?>

<div style="width:650px; margin:0 auto;">
<div style="float:left;padding:30px;" align="center">
<div id="picture_preview">
<img src="<?=$profimg?>" width="200px" height="250px" style="border:1px solid #e2e2e2" alt="<?=$profimg?>" onerror="this.onerror=null; this.src='photos/donald-duck.jpg';"/>
<br/><br/>
</div>
</div>

<div style="float:left;width:50%;padding-top: 8%;" align="center">
Select an image file on your computer (2MB max)
</br></br>
<iframe name="upload_iframe" id="upload_iframe" style="display:none;"></iframe>
<form action="processupload.php" method="post" enctype="multipart/form-data" id="UploadForm">
<input name="ImageFile" type="file" id="input_file"/>
</form>
<div id="output"></div>
<br/>
</div>
</div>
The Javascript
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script> 
$(function() { 
$('#UploadForm').on('change', function(e) {
e.preventDefault();
//show uploading message
$("#picture_preview").html('<div style="padding:10px"><img src="photos/round-loader.gif" alt="Please Wait"/> </div>');
$(this).ajaxSubmit({
        target: '#picture_preview',
        success:  afterSuccess //call function after success
});
});
}); 

function afterSuccess()  { 
$('#UploadForm').resetForm();  // reset form
$('#img_prof').attr('src',$('#picture_preview img').attr("src"));
} 
</script>
The php code that uploads as well as resize the images into different shapes(processupload.php)
<?php
include('db.php');
$session_id='100';//$_SESSION['uid']; //$session id
if(isset($_POST))
{
         //Settings
        $x35MaxWidth            = 35; //35x35 width
        $x35MaxHeight           = 35; //35x35 Height
        $x87MaxWidth            = 87; //87x87 Image width to
        $x87MaxHeight           = 87; //87x87 Image height to
        $x250MaxWidth           = 160; //160x250 Image width to
        $x250MaxHeight          = 250; //160x250 Image height to

        $x35Prefix                              = "35x35_".$session_id."_"; //x35 Prefix
        $x87Prefix              = "87x87_".$session_id."_"; //x87 Prefix
        $x250Prefix             = "160x250_".$session_id."_"; //x250 Prefix
        $OriginalPrefix         = $session_id."_"; // Prefix for original image
        $DestinationDirectory   = 'photos/'; //Upload Directory
        $jpg_quality                    = 90;

        // check if file upload went ok
        if(!isset($_FILES['ImageFile']) || !is_uploaded_file($_FILES['ImageFile']['tmp_name']))
        {
                        die('Something went wrong with Upload, May be File too Big?'); //output error
        }

        $RandomNumber   = rand(0, 9999999999); // We need same random name for both files.
        
        //Information about image that we need later.
        $ImageName              = strtolower($_FILES['ImageFile']['name']);
        $ImageSize              = $_FILES['ImageFile']['size']; 
        $TempSrc                = $_FILES['ImageFile']['tmp_name'];
        $ImageType              = $_FILES['ImageFile']['type'];
        $process                = true;
        
        //Validate file + create image from uploaded file.
        switch(strtolower($ImageType))
        {
                case 'image/png':
                        $CreatedImage = imagecreatefrompng($_FILES['ImageFile']['tmp_name']);
                        break;          
                case 'image/gif':
                        $CreatedImage = imagecreatefromgif($_FILES['ImageFile']['tmp_name']);
                        break;
                case 'image/jpeg':
                        $CreatedImage = imagecreatefromjpeg($_FILES['ImageFile']['tmp_name']);
                        break;
                default:
                        die('Unsupported File!'); //output error
        }

        //get Image Size
        list($CurWidth,$CurHeight)=getimagesize($TempSrc);
        
        //get file extension, this will be added after random name
        $ImageExt = substr($ImageName, strrpos($ImageName, '.'));
        $ImageExt = str_replace('.','',$ImageExt);
        
        //Set the Destination Image path with Random Name
        $x35_DestRandImageName  = $DestinationDirectory.$x35Prefix.$RandomNumber.'.'.$ImageExt; //x35 name
        $x250_DestRandImageName = $DestinationDirectory.$x250Prefix.$RandomNumber.'.'.$ImageExt; //x250 name
        $x87_DestRandImageName  = $DestinationDirectory.$x87Prefix.$RandomNumber.'.'.$ImageExt; //x87 name
        $original_DestRandImageName     = $DestinationDirectory.$OriginalPrefix.$RandomNumber.'.'.$ImageExt; //Name for Original Image
        
        //Resize image to our Specified Size by calling our resizeImage function.

                //Create thumnail for the Image
                resizeImage($CurWidth,$CurHeight,$x35MaxWidth,$x35MaxHeight,$x35_DestRandImageName,$CreatedImage);
                resizeImage($CurWidth,$CurHeight,$x250MaxWidth,$x250MaxHeight,$x250_DestRandImageName,$CreatedImage);
                resizeImage($CurWidth,$CurHeight,$x87MaxWidth,$x87MaxHeight,$x87_DestRandImageName,$CreatedImage);
                resizeImage($CurWidth,$CurHeight,$CurWidth,$CurWidth,$original_DestRandImageName,$CreatedImage);
                
                echo '<img src="'.$original_DestRandImageName.'" alt="Profile Image" height="250" width="160">'; // This will be returned back to the calling page
                
                        // Insert info into database table.. 
                        mysql_query("UPDATE 2lessonsUsers SET profile_image='$OriginalPrefix$RandomNumber.$ImageExt' WHERE uid='$session_id'") or die(mysql_error());

}

function resizeImage($CurWidth,$CurHeight,$MaxWidth,$MaxHeight,$DestFolder,$SrcImage)
{
        $ImageScale             = min($MaxWidth/$CurWidth, $MaxHeight/$CurHeight);
        $NewWidth                       = ceil($ImageScale*$CurWidth);
        $NewHeight                      = ceil($ImageScale*$CurHeight);
        $NewCanves                      = imagecreatetruecolor($NewWidth, $NewHeight);
        // Resize Image
        if(imagecopyresampled($NewCanves, $SrcImage,0, 0, 0, 0, $NewWidth, $NewHeight, $CurWidth, $CurHeight))
        {
                // copy file
                if(imagejpeg($NewCanves,$DestFolder,100))
                {
                        imagedestroy($NewCanves);
                        return true;
                }
        }
}
?>

5 comments:

  1. It's actually a great and useful piece of information. I am glad that you shared this helpful info with us. Please stay us informed like this. Thank you for sharing.

    My weblog - hosting service
    My website ... hosting providers

    ReplyDelete
  2. How do I increase the size of the photo from 2mb to higher?

    ReplyDelete
  3. Thanks it helped me to understand the concept of re sizing the images.. :)

    ReplyDelete
  4. افضل الخدمات التى تقدمها شركة ثراء الخليج للخدمات المنزلية فلدينا افضل شركة كشف تسربات المياه بالرياض التى تقوم بافضل خدمات الكشف عن تسريب المياه الى جانب افضل شركة تنظيف خزانات بالرياض التى تقوم بافضل تنظيف للخزانات العلوية والارضية فلا تتردد بالاتصال بنا الى جانب افضل شركة تنظيف كنب بالرياض التى تقوم بافضل خدمات تنظيف للمفروشات والموكيت الى جانب افضل الخدمات فى عالم نقل الاثاث المنزلى لما لدينا من شركة نقل اثاث بالرياض التى تقوم بافضل خدمات نقل الاثاث المنزلى الى جانب افضل شركة لتنظيف المجالس لما لدينا من افضل الماكينات الخاصة ب شركة تنظيف مجالس بالرياض التى تقوم بافضل خدمات تنظيف الموكيت والمفروشات بالرياض الى جانب شركة تنظيف موكيت بالرياض حيث لدينا افضل الخدمات مقدمة من شركة نقل عفش بالدمام التى تقوم بافضل خدمات نقل الاثاث الى جانب الافضلية فى مكافحة الحشرات من النمل الابيض لما لدينا من مكافحة النمل الابيض التى تقوم بافضل خدمات مكافحة الارضة بالرياض

    ReplyDelete