There can be situations in which you may need to validate(check) the dimensions(width or height) of an image before uploading on the server, or maybe you need to crop the image after checking its dimensions, in that case, you can do it at client-side using javascript, so in this article, I will show you how you can get width and height of an image using javascript.

Validate (check) image dimensions (width and height) before uploading using Javascript

Let's create the simple HTML for file browsing and a button clicking on which, we will validate the dimensions of an image.

<input type="file" name="file" id="file">
<br/>
<input type="button" value="Upload" onclick="return CheckDimension()" />
<br/>
<br/>
Width: <span id='width'></span><br/>
Height: <span id='height'></span>

now we will add the javascript function to check dimensions of image

<script type="text/javascript">
function CheckDimension() {
    //Get reference of File.
    var fileUpload = document.getElementById("file");
 
    //Check whether the file is valid Image.
    var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(.jpg|.png|.gif)$");
    if (regex.test(fileUpload.value.toLowerCase())) {
 
        //Check whether HTML5 is supported.
        if (typeof (fileUpload.files) != "undefined") {
            //Initiate the FileReader object.
            var reader = new FileReader();
            //Read the contents of Image File.
            reader.readAsDataURL(fileUpload.files[0]);
            reader.onload = function (e) {
                //Initiate the JavaScript Image object.
                var image = new Image();
 
                //Set the Base64 string return from FileReader as source.
                image.src = e.target.result;
                       
                //Validate the File Height and Width.
                image.onload = function () {
                    var height = this.height;
                    var width = this.width;
                    if (height > 200 || width > 200) {
 
                       //show width and height to user
                        document.getElementById("width").innerHTML=width;
                        document.getElementById("height").innerHTML=height;
                        alert("Height and Width must not exceed 200px.");
                        return false;
                    }
                    alert("Uploaded image has valid Height and Width.");
                    return true;
                };
 
            }
        } else {
            alert("This browser does not support HTML5.");
            return false;
        }
    } else {
        alert("Please select a valid Image file.");
        return false;
    }
}
</script>

Demo output:

get-width-height-using-javascript-min.gif

 Here is the complete working fiddle

Validate (check) image dimensions (width and height) before uploading using jQuery

Validating or checking dimensions of an image is much similar using jQuery, we can call a function to check dimensions on image change, create a new Image source and check it's dimensions using jQuery .width and .height functions

Here are the Complete jQuery and HTML Code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" name="file" id="file">
<br/>
<br/>
Width: <span id='width'></span><br/>
Height: <span id='height'></span>

<script>
var _URL = window.URL || window.webkitURL;
$("#file").change(function (e) {
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
        img.onload = function () {
        var width=this.width;
         var height=this.height;
          $("#width").html(width);
          $("#height").html(height);
         if(width > 200 || height > 200)
         {
           alert("Width and heigth should not be more than 200px ");
         }                          
        };
        img.src = _URL.createObjectURL(file);
    }
});
</script>

In the above code, we are not checking image formats and not calling the function on button click, calling it on 'file' value change.