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 + '');
            }
        }
    }

LittleDragon · Answer 1 · 2014-07-18T05:54:25.763

2

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

check this example

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

edited Jul 18 '14 at 05:54

answered Jul 18 '14 at 05:49

LittleDragon

2,317
2
18
23

can u convert the above java-script to j query, acutely iam unable to find the ID dynamically value of file uploader thru the j query, can u do this. – Ravi Kant Singh Jul 18 '14 at 05:52
please check the link – LittleDragon Jul 18 '14 at 05:54

score 0 · Answer 2 · edited May 23 '17 at 10:25

0

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

e.g

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

edited May 23 '17 at 10:25

Community

1
1

answered Jul 18 '14 at 06:14

Midio

36
3

I don't see you doing that inside of the image's onload function in your question code example. Here is a working example http://jsbin.com/geburezo/1/edit – Midio Jul 21 '14 at 07:48

score 0 · Answer 3 · answered Sep 10 '19 at 06:52

     <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>

@TomK. yes , this is hot question i asked, so i decided to put my new code which now i am using. so the guys dont get confussed. that'y i am adding explanation. — Ravi Kant Singh, Sep 10 '19 at 07:25

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

3 Answers3