HTML file input window limit size?

Question

I am using input file and I am able to limit the file type in the file dialog window like so:

<input type="file" name="logoIMG" id="logoIMG" class="" accept=".png">

I am just wondering if I could limit the file size so the user can only pick files 2 MB or less?

You do not need a library. There are so many answers here on `stackoverflow` to limit file size via JS or jQuery. [Like this one](https://stackoverflow.com/questions/5697605/limit-the-size-of-a-file-upload-html-input-element/17173301#17173301) OR [Here as well](https://stackoverflow.com/questions/307679/using-jquery-restricting-file-size-before-uploading) — Always Helping, Jul 23 '20 at 08:29

Kiran Mistry · Answer 1 · 2020-07-23T09:12:22.713

You can't handle with HTML code u need to write some code for validation on file size limit

For Example :

var uploadField = document.getElementById("file");

uploadField.onchange = function() {
    if(this.files[0].size > 2097152){
       alert("File is too big!");
       this.value = "";
    };
};

This example should work fine. I set it up for roughly 2MB, 1MB in Bytes is 1,048,576 so you can multiply it by the limit you need.

Check or preview Here

You Can also go with JQuery like this

$("input[type='file']").on("change", function() {
  if (this.files[0].size > 2000000) {
    var size = this.files[0].size;
    size = ( size >>> 20 ) + '.' + ( size & (2*0x3FF ) ) + '  ' ;
    alert("Please upload file less than  and your file size is " + size + " Thanks!! ");
    $(this).val('');
    return size;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<input type="file">

You `COPIED` this `code` from here: https://jsfiddle.net/hibbard_eu/7bjfr/ and *made it your own fiddle*. **Its not good.** If you want to help out someone just add a comment in the question to direct them to the right place. — Always Helping, Jul 23 '20 at 08:34
yes @AlwaysHelping u correct but i just posted same answer and i want to add jquery code also that why i have posted both code javascript and jquery for better understanding and BTW i know how to answer — Kiran Mistry, Jul 23 '20 at 08:53

score 0 · Answer 2 · answered Jul 23 '20 at 08:30

0

You can limit the size by using javascript but I don't think you can do it only using html.

There is a similar question on stack that you might find usefull : Limit the size of a file upload (html input element)

answered Jul 23 '20 at 08:30

OgL0C

33
1
4

score 0 · Answer 3 · answered Jul 23 '20 at 11:02

0

The min and max properties have the smallest and largest properties allowed for an element. min and max properties; Used with number, range, date, datetime, datetime-local, month, hour and week type.

answered Jul 23 '20 at 11:02

Eda Ozonal

1

score 0 · Answer 4 · answered Mar 31 '22 at 10:32

file upload size limit using javascript. const maxAllowedSize = 3 * 1024 * 1024; //this means max file size 3 mb

const doc_input = document.getElementById('file_upload')

doc_input.addEventListener('change', (event) => {
const target = event.target
    if (target.files && target.files[0]) {

    const maxAllowedSize = 3 * 1024 * 1024;
    if (target.files[0].size > maxAllowedSize) {
        alert('Choose max 3mb files');
        target.value = ''
    }
}
})

<input id="file_upload" type="file" />

HTML file input window limit size?

4 Answers4