How to get image height width in jquery

Question

I have a form where I uploads the image, in the jQuery function;

$('body').on('change', '#file', function () {

By using this.files[0] I am getting image name and size. for this I am using. this.files[0].size and this.files[0].name. But now I want to get height and width of image. How can I do that?

will this not work for you? http://stackoverflow.com/questions/8903854/check-image-width-and-height-on-upload-with-javascript — Paul Fitzgerald, Mar 20 '16 at 14:33

Ahmed Syed · Accepted Answer · 2016-03-21T05:59:50.137

I've got the solution by myself, it is as follows,

var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
 function imageIsLoaded(e) {
         var image = new Image();
         image.src = e.target.result;
         image.onload = function() {
              // access image size here 
              alert(this.width);
              alert(this.height);
         };
 };

as jquery dont know exact file type, so after Image type validation we can convert any image file to jQuery readable image, so jQuery can handle it as image. Hence for converting file to image we need reader.

How to get image height width in jquery

1 Answers1