JQuery Validating image with size < 2mb

Question

I want to validate my input upload image with only allow image with size less than 2mb with jQuery. I find around but mostly guides are about validating dimension (width and height of image) Here's my code:

html:

<input type="file" name="logo" id="logo" accept="image/*">
<p class="error_line" style="display: none">Image Only</p>

<input class="btn btn-primary submit-btn" style="margin:10px 0; width: auto" type="submit" value="Create">

Javascript:

$(document).ready(function () {
    var _URL = window.URL || window.webkitURL;
    $("#logo").change(function(e) {
        var file, img;
        if ((file = this.files[0])) {
            img = new Image();
            img.onload = function() {
                $('.submit-btn').prop('disabled', false);
                $(".error_line").fadeOut();
            };
            img.onerror = function() {
                $('.submit-btn').prop('disabled', true);
                $(".error_line").fadeIn();
            };
            img.src = _URL.createObjectURL(file);
        }
    });
});

Hope this will help you. http://stackoverflow.com/questions/1601455/how-to-check-file-input-size-with-jquery — Kiran, Mar 21 '17 at 09:15
Possible duplicate of [How to check file input size with jQuery?](http://stackoverflow.com/questions/1601455/how-to-check-file-input-size-with-jquery) — Álvaro González, Mar 21 '17 at 09:19
As answers so far illustrate, the `Image` web API doesn't help. File size is not exclusive to pictures and the `File` API comes to the rescue. — Álvaro González, Mar 21 '17 at 09:20

score 5 · Accepted Answer · edited Aug 01 '19 at 09:48

5

 $(document).ready(function() {       
    $('#logo').bind('change', function() {
        var a=(this.files[0].size);
        alert(a);
        if(a > 2000000) {
            alert('large');
        };
    });
});

edited Aug 01 '19 at 09:48

Asrar Ahmad Ehsan

48
2
11

answered Mar 21 '17 at 09:17

Richardson. M

852
2
17
28

Rohan Kumar · Answer 2 · 2017-03-21T09:38:15.757

Try this,

 if(Math.round(file.size/(1024*1024)) > 2){ // make it in MB so divide by 1024*1024
    alert('Please select image size less than 2 MB');
    return false;
 }

Snippet

$(document).ready(function() {
  var _URL = window.URL || window.webkitURL;
  $("#logo").change(function(e) {
    var file = this.files[0], img;
    if (Math.round(file.size / (1024 * 1024)) > 2) { // make it in MB so divide by 1024*1024
       alert('Please select image size less than 2 MB');
       return false;
    }
    if (file) {
      img = new Image();
      img.onload = function() {
        $('.submit-btn').prop('disabled', false);
        $(".error_line").fadeOut();
        
      };
      img.onerror = function() {
        $('.submit-btn').prop('disabled', true);
        $(".error_line").fadeIn();
      };
      img.src = _URL.createObjectURL(file);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="file" name="logo" id="logo" accept="image/*">
<p class="error_line" style="display: none">Image Only</p>

<input class="btn btn-primary submit-btn" style="margin:10px 0; width: auto" type="submit" value="Create">

JQuery Validating image with size < 2mb

2 Answers2