How to Check Image Height & Width using JavaScipt in HTML5


Here is the code snippet for check image height and width using JavaScript 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 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>
            </form>
        </body>
        </html>

Create Html File and run in your browser.

Related Posts

Previous
Next Post »

Thanks for comments.....