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 · Accepted Answer · 2014-07-18 05:54:25Z

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, 2014 at 5:54

answered Jul 18, 2014 at 5:49

LittleDragon

2,4472 gold badges21 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ravi Kant Singh Over a year ago

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.

LittleDragon Over a year ago

please check the link

Community · Accepted Answer · 2017-05-23 10:25:04Z

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, 2017 at 10:25

CommunityBot

11 silver badge

answered Jul 18, 2014 at 6:14

Midio

363 bronze badges

1 Comment

Midio Over a year ago

I don't see you doing that inside of the image's onload function in your question code example. Here is a working example jsbin.com/geburezo/1/edit

Ravi Kant Singh · Accepted Answer · 2019-09-10 06:52:42Z

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

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related