jquery detecting image width and height

Question

i'm trying to make a form for submit profile picture function where i wanted to limited the size of the image to 150 x 150 and before i goes to the server-side i would like to verify it first in the client side.

Tho i'm not sure what i am doing wrong, this made sense to me but it wouldn't detect the image width. Here's my code

$(function(){
var fileInput = $('.upload-file');
var maxSize = fileInput.data('max-size');



$('.register').submit(function(e){
    if(fileInput.get(0).files.length){

        var fileSize = fileInput.get(0).files[0].size; // in bytes
        var ext = $('.upload-file').val().split('.').pop().toLowerCase();
        var theimgWidth = fileInput.get(0).files[0].width;
        var theimgHeight = $('.upload-file').height();

        if(fileSize>maxSize){
        alert('File size is bigger than 100kb');
        return false;
        }else if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1){
        alert('invalid extension!');
        return false;
        }else if(theimgWidth != '150'){
        alert(theimgWidth);
        return false;
        }else if(imgHeight != '150'){
        alert('invalid dimension!');
        return false;
        }

    }else{
    alert('choose file, please');
    return false;
    }

    });

the reason why i put alert(theimgWidth) was to check if the width was being detected at all, it wasn't detected.