Reputation: 2244
I have to get the image width and height using jQuery ,but i stucked here. Here image width and height is showing undefined ,please suggest me. Thank you for any suggestion.
Below is code.
$(document).ready(function () {
$("#file").change(function () {
var files = this.files[0];
var reader = new FileReader();
var img = new Image();
reader.onload = function (e) {
img.src = e.target.result;
var fileSize = Math.round(files.size / 1024);///output is coming.
alert("File size is " + fileSize + " kb");
alert("width=" + this.width + " height=" + this.height);//showing undefined
};
reader.readAsDataURL(files);
});
});
<input type="file" class="cropit-image-input hii" id="file" style="display: none;" >
Upvotes: 2
Views: 76
Reputation: 10548
I Checked in my desktop.
When I changed this.width
& this.height
to img.width
& img.height
respectively. It worked.
Change
alert("width=" + this.width + " height=" + this.height);//showing undefined
To
alert("width=" + img.width + " height=" + img.height);//showing undefined
Upvotes: 1
Reputation: 133453
You can use img
instead of this
.
alert("width=" + img.width + " height=" + img.height);
$(document).ready(function() {
$("#file").change(function() {
var files = this.files[0];
var reader = new FileReader();
var img = new Image();
reader.onload = function(e) {
img.src = e.target.result;
var fileSize = Math.round(files.size / 1024); ///output is coming.
alert("File size is " + fileSize + " kb");
alert("width=" + img.width + " height=" + img.height); //showing undefined
};
reader.readAsDataURL(files);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" class="cropit-image-input hii" id="file">
Upvotes: 2