Few days back when I was working on a web-application, I have to limit file upload size, so I was checking file size using javascript before uploading it to server, so in this article, I have mentioned easy way to check file size in mb or kb using javascript so you can validate file size and allow limits

Check File Size on File Input Change

Suppose, we have HTML as below

<input type="file" />
<br/>
<div id="fileSize">

</div>

then we will create a Javascript function which will be called, once we add file in HTML input type=file element, and using that function we will get file size value

        document.querySelector('input[type="file"]').addEventListener("change", function(event) {
            var _size = this.files[0].size;
            
            var fSExt = new Array('Bytes', 'KB', 'MB', 'GB'),
            i=0;
            //check if file is in GB,MB,KB or Bytes
            while(_size > 900)
            { 
              _size/=1024; //divide file size 
              i++;
            }
            //get exact size
            var exactSize = (Math.round(_size*100)/100)+' '+fSExt[i];

            document.getElementById("fileSize").innerHTML= 'FILE SIZE = '+ exactSize;
        });

In the above code, once we have file size, which is usually in "Bytes", we will convert file size into MB, KB or GB, depending on how large is file.

To Convert it we are looping code if file size is greater by 900 and dividing it by 1024 (1KB).

Here is the demo output:

file-size-in-kb-mb-using-javascript

Here is fiddle demo: https://jsfiddle.net/m57uzkr9/

Get Multiple File input file size

If you are uploading multiple files at once, you may want to get file size of each file, so we can do same thing as above, but we will have to use For loop.

So javascript code will look like below

         document.querySelector('input[type="file"]').addEventListener("change", function(event) { 
       var fSExt = new Array('Bytes', 'KB', 'MB', 'GB');
        // VALIDATE OR CHECK IF ANY FILE IS SELECTED.
        if (this.files.length > 0) {
            // RUN A LOOP TO CHECK EACH SELECTED FILE.
            for (var i = 0; i <= this.files.length - 1; i++) {

                var _size = this.files.item(i).size;      // THE SIZE OF THE FILE.
                
                j=0;
                //check if file is in GB,MB,KB or Bytes
                while(_size > 900)
                { 
                  _size/=1024; //divide file size 
                  j++;
                }
                //get exact size
                var exactSize = (Math.round(_size*100)/100)+' '+fSExt[j];
                
                  document.getElementById("fileSize").innerHTML=  document.getElementById("fileSize").innerHTML + "<br/>"+i+' FILE SIZE = '+ exactSize;

            }
        }
    });

Considering HTML is as below

<input type="file" id="file" multiple  /><br/>
<div id="fileSize">

</div>

If we execute above code and select 2 files output can be as below

0 FILE SIZE = 9.92 KB
1 FILE SIZE = 28.12 KB

You can check fiddle here: https://jsfiddle.net/bhatpm4z/

That's it.

You may also like to read:

Get image width and height using Javascript and jQuery

Comments in JSON File

Creating Multi-Line String in Javascript

Using Google maps Javascript api in HTML (Show location with Marker)