Get Image Dimensions (Height and Width) Js or jquery

Question

I have searched for this, but every time I implement the code it return 24 as height and width as 237 when I upload 400X400 image.

$(document).on('change','#tt' , function(){
    var img = document.getElementById('tt');
    var nheight = img.clientHeight;
    var nwidth = img.clientWidth;
    alert(nheight)
    alert(nwidth)
});

<input type="file" id="tt" name="tt" >

Is anyone know how can I get 400 as height and 400 as width in alert box when I upload 400X400 image. Any help is really much appreciated.....

You trying to get width and height of input not image.

Mohammad
– Mohammad

2016-09-24 18:42:56 +00:00
Commented Sep 24, 2016 at 18:42 — Mohammad
– Mohammad, Commented Sep 24, 2016 at 18:42
Got that now..thanks. @Mohammad

Aamir
– Aamir

2016-09-24 18:50:20 +00:00
Commented Sep 24, 2016 at 18:50 — Aamir
– Aamir, Commented Sep 24, 2016 at 18:50
img.naturalWidth and img.naturalHeight is correct answer.

Kamlesh
– Kamlesh

2019-10-09 05:29:46 +00:00
Commented Oct 9, 2019 at 5:29 — Kamlesh
– Kamlesh, Commented Oct 9, 2019 at 5:29

Rahul Patel · Accepted Answer · 2016-09-24 18:44:08Z

5

Onchange event of file upload creating a Image object and attach uploaded file object as src to image object and then onload event of image object find height and width of image.

Please check below snippet for more understanding.

var _URL = window.URL || window.webkitURL;
$(document).on('change','#tt' , function(){    
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
        img.onload = function () {
            alert("width : "+this.width + " and height : " + this.height);
        };
        img.src = _URL.createObjectURL(file);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="tt" name="tt" >

answered Sep 24, 2016 at 18:44

Rahul Patel

5,2342 gold badges16 silver badges26 bronze badges

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

2 Comments

Mohammad Over a year ago

URL.createObjectURL() is an experimental technology and doesn't support old version of browser.

Rahul Patel Over a year ago

It support to all latest browser. You can refer developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

benomatis · Accepted Answer · 2016-09-24 18:43:17Z

1

var nheight = img.clientHeight;
var nwidth = img.clientWidth;

will just get you the dimension.

Refer this -

Try

var x = document.getElementById("myImg").naturalWidth;

the naturalHeight property to return the original height of an image, or the height property to set or return the value of the height attribute of an image

http://www.w3schools.com/jsref/prop_img_naturalwidth.asp

edited Sep 24, 2016 at 18:43

benomatis

5,6537 gold badges39 silver badges61 bronze badges

answered Sep 24, 2016 at 18:41

Dev1ce

5,98425 gold badges100 silver badges161 bronze badges

Collectives™ on Stack Overflow

Get Image Dimensions (Height and Width) Js or jquery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related