How do I get natural dimensions of an image using javascript or jquery? -

i have code far:

var img = document.getelementbyid('draggable'); var width = img.clientwidth; var height = img.clientheight; 

however gets me html attributes - css styles. want dimensions of actual image resource, of file.

i need because upon uploading image, it's width gets set 0px , have no idea why or happening. prevent want actual dimension , reset them. possible?

edit: when try naturalwidth 0 result. i've added picture. weird thing happens when upload new files , upon refresh it's working should.

http://oi39.tinypic.com/3582xq9.jpg

you use naturalwidth , naturalheight, these properties contain actual, non-modified width , height of image, have wait until image has loaded them

var img = document.getelementbyid('draggable');  img.onload = function() {     var width  = img.naturalwidth;     var height = img.naturalheight; } 

this supported ie9 , up, if have support older browser create new image, set it's source same image, , if don't modify size of image, return images natural size, default when no other size given

var img     = document.getelementbyid('draggable'),     new_img = new image();  new_img.onload = function() {     var width  = this.width,         heigth = this.height; }  new_img.src = img.src; 

fiddle