Get image size before uploading using JQuery

Question

Guys I have a form that allow the user to upload image then check it using JQuery before passing it to php. Here is my jquery code that show the user his uploaded image size:

//getting uploaded file size
var globalSizeVar = 4000;
$("#petImageButton").change(function(){
    var iSize = ($("#petImageButton")[0].files[0].size / 1024); 
    if (iSize / 1024 > 1){ 
        if (((iSize / 1024) / 1024) > 1){ 
            iSize = (Math.round(((iSize / 1024) / 1024) * 100) / 100);
            $("#imageSizeSmall").text("File size : " + iSize + "Gb"); 
        }else{ 
            iSize = (Math.round((iSize / 1024) * 100) / 100)
            $("#imageSizeSmall").text(" - File size : " + iSize + "Mb"); 
        } 
    }else{
        iSize = (Math.round(iSize * 100) / 100)
        $("#imageSizeSmall").text(" - File size : " + iSize  + "kb");
        globalSizeVar = iSize;
    } 
});

And this is the jquery code that check for the image size :

if(globalSizeVar <= 2000) //this condition is wrong when my image size become more than 1 mb or something

I tried to increase it from 2000 to 3000 but nothing happens.. any help please?