How to get the file dimensions of a selected file using jQuery

Question

There is this code :-

$('#myFile').bind('change', function() {
  alert(this.files[0].type);
});

to get the file type. This code :-

$('#myFile').bind('change', function() {
  alert(this.files[0].size);
});

to get the file size. But I could not find any jQuery API to get the file dimensions. Please tell me about any. Any help will be appreciated. Thanks in advance.

possible duplicate of [Determine original size of image cross browser?](http://stackoverflow.com/questions/1944280/determine-original-size-of-image-cross-browser) — insertusernamehere, Oct 11 '13 at 09:31
possible duplicate of [How to Preview Image, get file size, image height and width before upload?](http://stackoverflow.com/questions/12570834/how-to-preview-image-get-file-size-image-height-and-width-before-upload) — putvande, Oct 11 '13 at 09:32
possible duplicate of [Check image width and height on upload with Javascript](http://stackoverflow.com/questions/8903854/check-image-width-and-height-on-upload-with-javascript) — Waldheinz, Oct 11 '13 at 09:34

score 1 · Accepted Answer · edited May 23 '17 at 11:57

1

Taken from here

This answer already posted on stackoverflow please see here

Try this

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

edited May 23 '17 at 11:57

Community

1
1

answered Oct 11 '13 at 09:32

Dhaval

2,801
20
39

What do you mean with all type of files ? – Dhaval Apr 03 '18 at 13:38

score 0 · Answer 2 · answered Oct 11 '13 at 09:31

0

You'll might want to let the browser decode the image to get the sizes:

Create an URL object for the file.
create an <image> DOM object,
register an onload event handler there
assign the object URL to the image

answered Oct 11 '13 at 09:31

Waldheinz

10,399
3
31
61

How to get the file dimensions of a selected file using jQuery

2 Answers2