CODEWITHSUNDEEP
javascriptjquery
h2O
h2O

Reputation: 544

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

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.

Upvotes: 0

Views: 5183

Answers (2)

Dhaval
Dhaval

Reputation: 2861

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);
    }
});

Upvotes: 1

Waldheinz
Waldheinz

Reputation: 10487

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

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

Upvotes: 0

Related Questions