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

4 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