check the width & height of image before uploading using javascript?

Question

I am using FILE Upload-er in the Grid-view, then i find the ID of fileuploader Dynamically. but the problem is iam getting the value 0 of height & width. Below the code which iam using .

function validateFileSize() {
        debugger;
        for (var i = 1; i < document.getElementById('<%=gvDocuments.ClientID %>').rows.length; i++) {
            var uploadControl = document.getElementById('<%=gvDocuments.ClientID %>').rows[i].cells[3].getElementsByTagName('INPUT')[0].id; //** here i find the ID of File Uploader
            if (document.getElementById('<%=gvDocuments.ClientID %>').rows[i].cells[1].getElementsByTagName('SELECT')[0].value == "18")//** here i find the ID of DropDownlist
             {
                var newImg = new Image();
                newImg.src = document.getElementById(uploadControl).value;
                var height = newImg.height;
                var width = newImg.width;

                alert('The Image Dimension is ' + height + ' X ' + width + '');
            }
        }
    }

Answer 1

If you are using jQuery and you are requesting image sizes like this

check this example

http://jsbin.com/oTAtIpA/3/edit

Answer 2

You just need to check the image dimensions inside of the image onload function.

eg

newImg.onload = function()
{
    var height = this.height;
    var width = this.width;
    // do stuff with image dimensions
}

Also see https://stackoverflow.com/a/626505/53241

LittleDragon's example is also using pure JavaScript to get the dimensions, not jQuery

Answer 3

     <script type="text/javascript">
            $(function () {
                $("#upload").bind("click", function () {
                    //Get reference of FileUpload.
                    var fileUpload = $("#fileUpload")[0];
                    //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;
                    }
                });
            });
        </script>

 <input type="file" id="fileUpload" />
    <input id="upload" type="button" value="Upload" />

TRY THIS>