如何在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?

Answer 1

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.