Javascript/jquery Size And Dimension Of Uploaded Image File

I need to display the image size in kilobyte and the dimension (height, width) using javascript/jquery. I came across few similar posts, but none could help me. I have two set of c

Solution 1:

All you have to do to use the two codes is to combine them in the displayPreview function. You can create the image object that will append to the preview and find it's size, width, and height all in the same function.

var _URL = window.URL || window.webkitURL;
functiondisplayPreview(files) {
   var file = files[0];//get file   var img = newImage();
   var sizeKB = file.size / 1024;
   img.onload = function() {
      $('#preview').append(img);
      alert("Size: " + sizeKB + "KB\nWidth: " + img.width + "\nHeight: " + img.height);
   }
   img.src = _URL.createObjectURL(file);
}

Solution 2:

You can try like this

HTML

<span id="preview"></span>
<input type="file"id="file" />

JQUERY

var _URL = window.URL || window.webkitURL;

functiondisplayPreview(files) {
    var img = newImage(),
        fileSize = Math.round(files.size / 1024);

    img.onload = function () {
        var width = this.width,
            height = this.height,
            imgsrc = this.src;

        doSomething(fileSize, width, height, imgsrc); //call function

    };
    img.src = _URL.createObjectURL(files);
}

// Do what you want in this functionfunctiondoSomething(size, width, height, imgsrc) {
    $('#preview').append('<img src="' + imgsrc + '">');
    alert("Size=" + size);
    alert("Width=" + width + " height=" + height);


}

Both methods

Jsfiddle http://jsfiddle.net/code_snips/w4y75/ Jsfiddle http://jsfiddle.net/code_snips/w4y75/1/

Solution 3:

How to get image width and height using jquery

Find out the image width and height during image upload using jQuery

Size and dimension of upload image file

var _URL = window.URL || window.webkitURL;
$("#myfile").change(function (e) {
    var file, img;
    if ((file = this.files[0])) {
        img = newImage();
        img.onload = function () {
            var wid = this.width;
            var ht = this.height;

            alert(this.width + " " + this.height);
            alert(wid);
            alert(ht);
        };

        img.src = _URL.createObjectURL(file);
    }
});