In this article I will explain how to get and then validate (check) dimensions (Height and Width) of Image file before upload using HTML5, JavaScript and jQuery.
HTML5 allows developers to access the file details such as Height and Width using JavaScript and jQuery.
 
Validate (Check) dimensions (Height and Width) of Image before Upload using JavaScript
The following HTML markup consists of an HTML FileUpload and a Button. When the button is clicked, a function named Upload is executed.
Inside this function, few checks are performed such as whether the File is a valid Image file and the browser supports HTML5 File API.
Then using the HTML5 FileReader API, the Image File is read as Base64 string and then is assigned as source to a JavaScript Image object.
Finally inside the onload event handler of the JavaScript Image object, the dimensions i.e. Height and Width of the selected Image file is determined.
<input type="file" id="fileUpload" />
<input type="button" value="Upload" onclick="return Upload()" />
<script type="text/javascript">
function Upload() {
    //Get reference of FileUpload.
    var fileUpload = document.getElementById("fileUpload");
 
    //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 > 100 || width > 100) {
                        alert("Height and Width must not exceed 100px.");
                        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>
 
 
Validate (Check) dimensions (Height and Width) of Image before Upload using jQuery
The following HTML markup consists of an HTML FileUpload and a Button. When the button is clicked, a jQuery click event handler is executed.
Inside the jQuery click event handler, few checks are performed such as whether the File is a valid Image file and the browser supports HTML5 File API.
Then using the HTML5 FileReader API, the Image File is read as Base64 string and then is assigned as source to a JavaScript Image object.
Finally inside the onload event handler of the JavaScript Image object, the dimensions i.e. Height and Width of the selected Image file is determined.
<input type="file" id="fileUpload" />
<input id="upload" type="button" value="Upload" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    $("#upload").bind("click", function () {
        //Get reference of FileUpload.
        var fileUpload = $("#fileUpload")[0];
 
        //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;
                    image.onload = function () {
                        //Determine the Height and Width.
                        var height = this.height;
                        var width = this.width;
                        if (height > 100 || width > 100) {
                            alert("Height and Width must not exceed 100px.");
                            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>
 
 
Screenshot
Validate (Check) dimensions (Height and Width) of Image before Upload using HTML5, JavaScript and jQuery
 
 
Browser Compatibility

The above code has been tested in the following browsers only in versions that support HTML5.

Internet Explorer  FireFox  Chrome  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
Downloads
Download Code