Here is the Code
Snippet to Check Image Height and Width Using JQuery in html5.
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<form action="/" method="post">
<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>
</form>
</body>
</html>
Now create html file
to Check in your browser for Height and Width Check of Image.
Thanks for comments.....