132

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:

132 Comments Add Comment

Comments Navigation : 1 2
  1. Hello,

    I have download the code from you. I do change my path to upload, after upload. It does not display the photo. It does save it into my path. Can help ?

    Add Reply
  2. Hey Saran, Nice and helpful codes for image uploading, i uploaded images through various size and inserted it to MySQL database too. After submitting the upload it displays the results from database inside “output” container while refreshing it is gonna hide!
    and as well it can display the results outside the “output” container which doesn’t hide but doesn’t display the results after submit successes (needs refresh the page to display).
    So can it be displayed after submit success and then not hiding in a refresh or should display and not needing refresh.
    thanks by the way.

    Add Reply
  3. Hi there! I like your srcipt,

    I was try to write text in normal_resize_image with imagettftext, but writes in both images,

    any idea how to add text only in normal_resize_image?

    Add Reply
  4. Dear Saran! Your code are amazing, but this my opinion on this code. If u can add 1 “gallery slideshow” (with image link below img) for the upload directory (images), it would be better. Thanks for your code.

    Add Reply
  5. Hi
    I really like your code and its easy to understand. However can you please tell me how do i save the original image and not the resized version. I just want to save the image with its original size.
    Thank You.

    Add Reply
  6. Hi! :)
    Thank you for the code!
    I have a question: how can have 3 images?
    I wish I had a picture with original size, a picture proportionally resized to 800px and a thumb.
    How can I do that?

    Add Reply
    • normally your script are save 2 image (1. crop 2. resize) i want to save crop imafe to my server , how can i apply your code thank you.

      • Just comment out or remove normal_resize_image() condition in PHP code, around line 60.
        Which is :

         
        1
        2
        3
        4
        if(normal_resize_image($image_res, $image_save_folder, $image_type, $max_image_size, $image_width, $image_height, $jpeg_quality))
        {
        // do stuff
        }
    • i do like this

      if(normal_resize_image($image_res, $image_save_folder, $image_type, $max_image_size, $image_width, $image_height, $jpeg_quality))
      {
      // do stuff
      }

      but it’s will save resize image to server,

      I want to save crop image in my server , How can i do that ?

    • I mean to say, remove other function normal_resize_image() and use only this:

       
      1
      2
      3
      4
      if(crop_image_square($image_res, $thumb_save_folder, $image_type, $thumb_square_size, $image_width, $image_height, $jpeg_quality))
                  {
                      echo 'Success';
                  }

      you can check dimensions using :

       
      1
      getimagesize($image_temp);
    • Thank , but when i use png image to resize and crop , when success background image have black , how to change background to white color ?

  7. great script!
    Thank You :-)

    some pictures are uploaded just fine however, with some i repeatedly ger
    403 forbidden
    on your demo page i get (for those trouble pics):
    “Warning: imagecopyresampled() expects parameter 2 to be resource, boolean given in processupload.php on line 123
    Resize Error”

    hmm.. i cannot distinguish what is wrong and what distinguish those pictures which produce this error from those who upload successfully
    (all are jpg)
    what can i do to be able to upload them all?

    Add Reply
  8. @saran pls help
    hey thank you very much for this awesome upload system, how can I add the watermark option for this system? I am not good for codding
    thank you very much

    Add Reply
  9. Hello ! It is a way to make .gif files not modified (to get all frames in it)
    Thx a lot for this great work !
    <3 play with it !

    Add Reply
  10. Great code :D but I was wondering how can I upload multi images with the same code? I mean, select several images at the same time and generate all the thumbnails at once?

    Add Reply
  11. Thanks man! i was i wanted this but through an OO approach. now ill just modify your fxns and use them in my php class and my js object. thanks allot.

    Add Reply
  12. How can I store the images by providing the relative path such that the images folder is in the same folder as these php files. I guess the lines that needed to be edited are line numbers 8,64,65,81,83 but still the image does not get stored in the images folder.

    Add Reply
  13. Wow,
    Thank you very much – exactly what I needed for my actual project. It’s easy to understand, simple and I works. Thankx a lot,
    Boy

    Add Reply
  14. Hello, Neat post. There’s an issue together with your website in web explorer, might check this?
    IE still is the marketplace leader and a good portion of folks will pass over your excellent writing due to this problem.

    Add Reply
  15. hey, would it be possible to show us how to implement image rotation based on exif data? i’ve been trying to build it into your script but am having issues.
    when uploading from an iphone or mobile, the picture can sometimes upload in the wrong orientation and I’ve read that this is due to the way the camera is held when taking the picture. You can solve this issue by using Exif data to correct the orientation, but I’m not sure where/how to implement it in your code.
    Would be very grateful for any help you can provide!

    Add Reply
    • You can do something like this, add following code in process.php before the line :
      $exif = exif_read_data($_FILES[‘ImageFile’][‘tmp_name’]);

       
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      if(!empty($exif['Orientation'])) {
          switch($exif['Orientation']) {
              case 8:
                  $CreatedImage = imagerotate($image,90,0);
                  break;
              case 3:
                  $CreatedImage = imagerotate($image,180,0);
                  break;
              case 6:
                  $CreatedImage = imagerotate($image,-90,0);
                  break;
          }
      }
  16. Ok, I found the button at the bottom of the tutorial and downloaded the code. Thanks.
    But I got the next two errors (Ajax folder is in the root as the other working projects):
    1. Warning: imagejpeg(F:/Websites/ajax-image-upload/uploads/picture1.jpg): failed to open stream: Permission denied in C:\xampp\htdocs\Ajax\processupload.php on line 128
    2. Warning: imagejpeg(F:/Websites/ajax-image-upload/uploads/picture1.jpg): failed to open stream: Permission denied in C:\xampp\htdocs\Ajax\processupload.php on line 174
    What are these and what is F:/…?
    My picture1.jpg is in an existing folder, your Demo works!

    Add Reply
    • Try changing the folder permission. If that does not work, then check to see if the image path is set correctly.
      use chmod(‘folderName’, 0755 ); to change permissions.

    • @Paul: open file “processupload.php” with Notepad++. Ctrl + A and Copy all data. Close file “processupload.php ” and delete file “processupload.php”. Create new 1 file .php and rename is “processupload.php”. open this file. Ctrl + V data. Edit line 8 : $DestinationDirectory = ‘your_path/uploads/'; and save this file. Run file index.php. I’ve success.

    • your path should be something like “uploads/” this worked for me. so as to target the uploads folder in your site’s root folder.

  17. - Ajax Image Uploader doesn’t work. Can’t able to submit text and push Upload button
    -Can’t enlarge first black board of HTML code because of text under the green arrow tab. (This is the same in Haruna’s code too.)
    – Neither Chrome nor Mozilla.
    – Maybe subscribe or something else helps?

    Add Reply
  18. Hi Saran,
    I know you’ve already been told, but you make awesome scripts!
    This might have been asked before, couldn’t find an answer in the comments, but could there be a way to just have a conditional MaxWidth or MaxHeight? I sometime need the client to upload images with a max width but without height limitations.

    Tx

    Add Reply
  19. i added an image syntax to make it submit to databes which it actually did but it not resizing the image
    it just the original image file is submitting

     
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    $connection = mysql_connect("localhost", "root", "");
    $database = mysql_select_db("like", $connection);
        ############ Edit settings ##############
        $ThumbSquareSize        = 200; //Thumbnail will be 200x200
        $BigImageMaxSize        = 500; //Image Maximum height or width
        $ThumbPrefix            = "thumb_"; //Normal thumb Prefix
        $pics = $_FILES['pics']['name'];
        $DestinationDirectory   = 'uploads/'; //specify upload directory ends with / (slash)
        $place = $DestinationDirectory.$pics;
        move_uploaded_file($_FILES['pics']['tmp_name'], $place);
        $Quality                = 90; //jpeg quality
        ##########################################
        $sql =mysql_query("INSERT INTO myImageTable (ImageName, ThumbName, ImgPath)
            VALUES ('$pics', '$ThumbPrefix/.$pics', 'uploads/$pics')"
    );
            $query = mysql_query($sql, $connection);

    $row = mysql_affected_rows();
    return $query;

    $close = mysql_connect();
    Add Reply
Comments Navigation : 1 2

 

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 ↑