How to have jQuery get image size in bytes, not image dimensions?

Question

I am using jQuery 1.7.1.

After an image loads in the browser window, I want to retrieve its total byte size. Is there an object name / value for that?

Possible duplicate of: http://stackoverflow.com/questions/1310378/determining-image-file-size-dimensions-via-javascript/ — Christofer Eliasson, Feb 12 '12 at 22:24
Javascript is running on the CLIENT's computer, and if the browser supports HTML5's File API you could actually get the size of an image on the users computer, if of course the user wanted you to. To find the size of images on your server, you will need a SERVER language like PHP or Rails, OR you could do a HEAD request with AJAX to get the filesize or you could load the image in a canvas and get the filesize there. — adeneo, Feb 12 '12 at 22:25

ShankarSangoli · Accepted Answer · 2012-02-17T16:36:42.640

3

No, there is no way you can get the image size using jQuery or pure JavaScript. The only way is to get it from server side using ajax.

You can get the image url send it to a service or server side page and have the page or service return the image size.

edited Feb 17 '12 at 16:36

answered Feb 12 '12 at 22:23

ShankarSangoli

69,612
13
93
124

score 2 · Answer 2 · edited Dec 18 '17 at 00:14

**here is the jQuery Code to get image size and type with validations ** you can use this code inside the function in your jQuery file

if (window.File && window.FileReader && window.FileList && window.Blob)
{
   var pic_size = $('#profile_pic')[0].files[0].size;//get file size 
   var pic_type = $('#profile_pic')[0].files[0].type;

   var extension = pic_type.split('/').pop().toUpperCase();

    if (extension!="PNG" && extension!="JPG" && extension!="GIF" && extension!="JPEG" || pic_size>=2048000)
    {
        alert ("Please Select PNG,JPG,GIF,JPEG Image Only and File Size not Greater than 2MB");
        $( "#profile_pic" ).focus()
        return false;
    }
 }

score 1 · Answer 3 · edited Oct 02 '18 at 10:05

1

Try this there is javascript code

$("#file_id")[0].files[0].size

edited Oct 02 '18 at 10:05

Roy G

901
10
25

answered Oct 02 '18 at 08:47

Malinda Wijekoon

173
1
3
13

score 0 · Answer 4 · answered Jul 05 '19 at 12:46

You can get file size by below

$("#selector")[0].files[0].size

And Also You can get file format by below

$("#selector")[0].files[0].type

Also if you want validation like file size is not more than 2 MB than you can try by this

var mS_totalBytes = this.files[0].size;
var mS_size = Math.floor(mS_totalBytes/1024000); // its on MB

use if else condition based on your requirements like below

var mS_totalBytes = this.files[0].size;
var _size = Math.floor(mS_totalBytes/1024000);   // in MB
//alert(mS_size);
if(mS_size >= 1){
    jQuery(".ExportAndroidAsset").prop('disabled', true);
    alert("MAximum File Size is 1MB");
    jQuery(".pxel_Bar").css("width","1%");
    jQuery(".pxel_Progress").hide();
    jQuery(".tab-pane .output label").show();
    jQuery('input[name=imagefile]').val('');
}
else{
    jQuery(".ExportAndroidAsset").prop('disabled', false);
    jQuery(".pxel_Progress").show();
    jQuery(".tab-pane .output label").hide();
}

score 0 · Answer 5 · answered Feb 12 '12 at 22:22

0

I don't think this is possible. You'll probably need a server-side language.

answered Feb 12 '12 at 22:22

elclanrs

92,861
21
134
171

How to have jQuery get image size in bytes, not image dimensions?

5 Answers5

Linked