135

Ajax Image Upload and Resize with jQuery and PHP

You may find plenty of great image uploader on the net, but they are also very complicated to configure and to implement without the help of professionals, especially if you are novice one. Those uploader comes with additional functions which you may not even need, so sometimes your best bet is to create your own image uploader, which will serve the purpose and keep things simple.

Today we are going to create an Ajax based image uploader, which means the image file will be uploaded to server using Ajax request, without reloading the page. We will also be using HTML5 File API to check file size and image type before uploading, then with PHP support we will create two images, a re-sized image and square thumbnail out of the original file. The examples you’ll find here are pretty basic and easy to understand.

Ajax Image Uploader

HTML Image Upload Form

Our upload form contains a file input field, submit button, a loading image and <div> element to output any messages or errors from server. Loading image should only be displayed when upload process starts, otherwise it should remain hidden from users. I have also created a CSS file to make this form little stylish, which you’ll find in the sample file.

 
1
2
3
4
5
6
<form action="processupload.php" method="post" enctype="multipart/form-data" id="MyUploadForm">
<input name="image_file" id="imageInput" type="file" />
<input type="submit"  id="submit-btn" value="Upload" />
<img src="images/ajax-loader.gif" id="loading-img" style="display:none;" alt="Please Wait"/>
</form>
<div id="output"></div>

jQuery

This tutorial uses jQuery Form plugin to make things easier, its a great plugin and allows us to submit forms using Ajax without writing additional code. It also supports numerous options that can easily adjust the behavior of our form. We just have to include this plugin in our form page and it takes care of everything. Have a look at the code below, see how simple it is to Ajax submit our form data using this form plugin? the amount of code required for jQuery Ajax is reduced to just $(this).ajaxSubmit(options); . We can now stop worrying about errors and start focusing on other areas that need attention.

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript" src="js/jquery.form.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var options = {
            target:   '#output',   // target element(s) to be updated with server response
            beforeSubmit:  beforeSubmit,  // pre-submit callback
            resetForm: true        // reset the form after successful submit
        };
       
     $('#MyUploadForm').submit(function() {
            $(this).ajaxSubmit(options);  //Ajax Submit form           
            // return false to prevent standard browser submit and page navigation
            return false;
        });
});</script>

Checking file size/type with HTML5 File API

Our form is ready to upload the image, but there’s one more thing we need to do with our image upload form. Thanks to HTML5 for introducing new File API, we can now check file size and type before even uploading it to the server, earlier things like these weren’t simple to achieve, because old browsers do not support File API, and alternative methods like Java or flash uploader were used, and those came with whole different things.

Have a look at code below, it simply checks File size and allowed file type using HTML5 File API support, in-case client is using old browsers such as internet explorer 6, it just outputs error asking to upgrade the browser, which is also a good thing to do!

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
//function to check file size before uploading.
function beforeSubmit(){
    //check whether browser fully supports all File API
   if (window.File && window.FileReader && window.FileList && window.Blob)
    {
       
        if( !$('#imageInput').val()) //check empty input filed
        {
            $("#output").html("Are you kidding me?");
            return false
        }
       
        var fsize = $('#imageInput')[0].files[0].size; //get file size
        var ftype = $('#imageInput')[0].files[0].type; // get file type
       

        //allow only valid image file types
        switch(ftype)
        {
            case 'image/png': case 'image/gif': case 'image/jpeg': case 'image/pjpeg':
                break;
            default:
                $("#output").html("<b>"+ftype+"</b> Unsupported file type!");
                return false
        }
       
        //Allowed file size is less than 1 MB (1048576)
        if(fsize>1048576)
        {
            $("#output").html("<b>"+fsize +"</b> Too big Image file! <br />Please reduce the size of your photo using an image editor.");
            return false
        }
               
        $('#submit-btn').hide(); //hide submit button
        $('#loading-img').show(); //hide submit button
        $("#output").html("");  
    }
    else
    {
        //Output error to older browsers that do not support HTML5 File API
        $("#output").html("Please upgrade your browser, because your current browser lacks some new features we need!");
        return false;
    }
}

We just need to attach above function to form plugin beforeSubmit callback, then this function will be invoked before the form is submitted, if image file size is too big or file type is not correct, the function will return false and then the form will not be submitted. This way we can avoid server side file validation, which means no more delays and no strain to the server.

Processing Image

The backbone of this uploader is this PHP file, this is where uploaded image file is sent for processing and then outputs are sent back to main page as Ajax response. Change the settings value of upload directory path, thumbnail size, image size as per your requirements, make sure upload directory is writable and path is correct.

In this PHP script there are two different functions normal_resize_image() and crop_image_square(). First one normal_resize_image() will proportionally resize image, it re-sizes according to specified size values but final size may vary depending on original size of image. And the crop_image_square() will crop image to exact given size no matter what its original size. I have used crop_image_square() to create thumbnails and for normal resize normal_resize_image() is used.

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<?php
############ Configuration ##############
$thumb_square_size      = 200; //Thumbnails will be cropped to 200x200 pixels
$max_image_size         = 500; //Maximum image size (height and width)
$thumb_prefix           = "thumb_"; //Normal thumb Prefix
$destination_folder     = 'G:/path/to/uploads/folder/'; //upload directory ends with / (slash)
$jpeg_quality           = 90; //jpeg quality
##########################################

//continue only if $_POST is set and it is a Ajax request
if(isset($_POST) && isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'){

    // check $_FILES['ImageFile'] not empty
    if(!isset($_FILES['image_file']) || !is_uploaded_file($_FILES['image_file']['tmp_name'])){
            die('Image file is Missing!'); // output error when above checks fail.
    }
   
    //get uploaded file info before we proceed
    $image_name = $_FILES['image_file']['name']; //file name
    $image_size = $_FILES['image_file']['size']; //file size
    $image_temp = $_FILES['image_file']['tmp_name']; //file temp

    $image_size_info    = getimagesize($image_temp); //gets image size info from valid image file
   
    if($image_size_info){
        $image_width        = $image_size_info[0]; //image width
        $image_height       = $image_size_info[1]; //image height
        $image_type         = $image_size_info['mime']; //image type
    }else{
        die("Make sure image file is valid!");
    }

    //switch statement below checks allowed image type
    //as well as creates new image from given file
    switch($image_type){
        case 'image/png':
            $image_res =  imagecreatefrompng($image_temp); break;
        case 'image/gif':
            $image_res =  imagecreatefromgif($image_temp); break;          
        case 'image/jpeg': case 'image/pjpeg':
            $image_res = imagecreatefromjpeg($image_temp); break;
        default:
            $image_res = false;
    }

    if($image_res){
        //Get file extension and name to construct new file name
        $image_info = pathinfo($image_name);
        $image_extension = strtolower($image_info["extension"]); //image extension
        $image_name_only = strtolower($image_info["filename"]);//file name only, no extension
       
        //create a random name for new image (Eg: fileName_293749.jpg) ;
        $new_file_name = $image_name_only. '_' .  rand(0, 9999999999) . '.' . $image_extension;
       
        //folder path to save resized images and thumbnails
        $thumb_save_folder  = $destination_folder . $thumb_prefix . $new_file_name;
        $image_save_folder  = $destination_folder . $new_file_name;
       
        //call normal_resize_image() function to proportionally resize image
        if(normal_resize_image($image_res, $image_save_folder, $image_type, $max_image_size, $image_width, $image_height, $jpeg_quality))
        {
            //call crop_image_square() function to create square thumbnails
            if(!crop_image_square($image_res, $thumb_save_folder, $image_type, $thumb_square_size, $image_width, $image_height, $jpeg_quality))
            {
                die('Error Creating thumbnail');
            }
           
            /* We have succesfully resized and created thumbnail image
            We can now output image to user's browser or store information in the database*/

            echo '<div align="center">';
            echo '<img src="uploads/'.$thumb_prefix . $new_file_name.'" alt="Thumbnail">';
            echo '<br />';
            echo '<img src="uploads/'. $new_file_name.'" alt="Resized Image">';
            echo '</div>';
        }
       
        imagedestroy($image_res); //freeup memory
    }
}

#####  This function will proportionally resize image #####
function normal_resize_image($source, $destination, $image_type, $max_size, $image_width, $image_height, $quality){
   
    if($image_width <= 0 || $image_height <= 0){return false;} //return false if nothing to resize
   
    //do not resize if image is smaller than max size
    if($image_width <= $max_size && $image_height <= $max_size){
        if(save_image($source, $destination, $image_type, $quality)){
            return true;
        }
    }
   
    //Construct a proportional size of new image
    $image_scale    = min($max_size/$image_width, $max_size/$image_height);
    $new_width      = ceil($image_scale * $image_width);
    $new_height     = ceil($image_scale * $image_height);
   
    $new_canvas     = imagecreatetruecolor( $new_width, $new_height ); //Create a new true color image
   
    //Copy and resize part of an image with resampling
    if(imagecopyresampled($new_canvas, $source, 0, 0, 0, 0, $new_width, $new_height, $image_width, $image_height)){
        save_image($new_canvas, $destination, $image_type, $quality); //save resized image
    }

    return true;
}

##### This function corps image to create exact square, no matter what its original size! ######
function crop_image_square($source, $destination, $image_type, $square_size, $image_width, $image_height, $quality){
    if($image_width <= 0 || $image_height <= 0){return false;} //return false if nothing to resize
   
    if( $image_width > $image_height )
    {
        $y_offset = 0;
        $x_offset = ($image_width - $image_height) / 2;
        $s_size     = $image_width - ($x_offset * 2);
    }else{
        $x_offset = 0;
        $y_offset = ($image_height - $image_width) / 2;
        $s_size = $image_height - ($y_offset * 2);
    }
    $new_canvas = imagecreatetruecolor( $square_size, $square_size); //Create a new true color image
   
    //Copy and resize part of an image with resampling
    if(imagecopyresampled($new_canvas, $source, 0, 0, $x_offset, $y_offset, $square_size, $square_size, $s_size, $s_size)){
        save_image($new_canvas, $destination, $image_type, $quality);
    }

    return true;
}

##### Saves image resource to file #####
function save_image($source, $destination, $image_type, $quality){
    switch(strtolower($image_type)){//determine mime type
        case 'image/png':
            imagepng($source, $destination); return true; //save png file
            break;
        case 'image/gif':
            imagegif($source, $destination); return true; //save gif file
            break;          
        case 'image/jpeg': case 'image/pjpeg':
            imagejpeg($source, $destination, $quality); return true; //save jpeg file
            break;
        default: return false;
    }
}

That’s all you need to create a Ajax based image uploader, which will resize and create thumbnail for you. The downloadable file contains PHP files, css, jQuery form plugin and may be some images. Hope it will help you create interesting upload form for your website and don’t forget to checkout my other similar articles here :
Ajax Image Upload and Resize with ImageMagick, Ajax Image Upload/Resize (Progressbar) and Ajax File Upload (Progressbar) Good luck!

Download Demo

Related Articles:

135 Comments Add Comment

Comments Navigation : 1 2 3
Comments Navigation : 1 2 3

 

Use Gravatar for Comment Pic | Start a topic for crucial discussion.


 Notify me of followup comments via e-mail. You can also subscribe without commenting.

Go Top ↑