Get File Size before Uploading in JavaScript and jQuery

A few months back I was working on an e-commerce website that required file uploading. Though I have written server side codes to verify the files, I wanted to check the size of each files before uploading. Here in this post I’ll share two simple examples on how to get the size of multiple files using JavaScript and jQuery.

This is important if you have set a limit for the number files to be uploaded or a specific size for each or all the files together. If the person tries to upload files that exceed the permissible limit, then the app must display a message, telling the user not to exceed the limit. Likewise, you can do many useful things with the size of the files, such as, convert the bytes to Kilobytes etc.

The first example is in JavaScript, followed by an example using jQuery. Each example has demos.

1) Get File Size using JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>Get File Size Before Uploading in JavaScript</title>
</head>

<body>
    <p>
        <input type="file" id="file" multiple onchange="GetFileSize()" />
    </p>
    
    <p id="fp"></p>
</body>

<script>
    function GetFileSize() {
        var fi = document.getElementById('file'); // GET THE FILE INPUT.

        // VALIDATE OR CHECK IF ANY FILE IS SELECTED.
        if (fi.files.length > 0) {
            // RUN A LOOP TO CHECK EACH SELECTED FILE.
            for (var i = 0; i <= fi.files.length - 1; i++) {

                var fsize = fi.files.item(i).size;      // THE SIZE OF THE FILE.
                document.getElementById('fp').innerHTML =
                    document.getElementById('fp').innerHTML + '<br /> ' +
                        '<b>' + Math.round((fsize / 1024)) + '</b> KB';
            }
        }
    }
</script>
</html>

Try it

Browser Support:
Chrome 39.0 - Yes | FireFox 34.0 - Yes | Internet Explorer 10 - Yes | Safari - No

In the markup section, I have added the file input element, and assigned the multiple attribute. The multiple is an HTML5 feature. It also has an event onchange(), that is, when I select files from the folder, it will automatically call the function GetFileSize().

See this demo

Inside the script, I’ll first get the file object, then find the length (number of files) and iterate through the file list to get the size of each files. The default value (the size) is in bytes. However, I am converting the bytes to Kilobytes, by dividing the size with 1024.

1 KB (Kilobyte) = 1024 Bytes

The JavaScript round() method will round of the values and display the size without any decimal values. This Math function is optional.

2) Get File Size using jQuery

Now, let’s see the jQuery example of the above script. The markup remains same, however, without the event. Just add the CDN for jQuery in the <head> section.

<head>
    <title>Get File Size using jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>

<body>
    <p>
        <input type="file" id="file" multiple />
    </p>
    
    <p id="fp"></p>
</body>

<script>
    $(document).ready(function () {
        $('#file').change(function () {
            if (this.files.length > 0) {

                $.each(this.files, function (index, value) {
                    $('#fp').html($('#fp').html() + '<br />' +
                        '<b>' + Math.round((value.size / 1024)) + '</b> KB');
                })
            }
        });
    });
</html>

Try it

The jQuery .change() function will trigger the change event, when the user selects a file (or files). The $.each() function will iterate through the files. It’s like the for loop in the JavaScript. The $.each() has two parameters. The first is file object, and the second is the callback function (with index and value) that will execute on each file. The value returns the size of each file.

Math.round(value.size);

See this demo

Well, that’s it. This is a very useful example if you wish to know the size of the files before uploading it to the server. Using similar method, you can get the name, size and total number of files using JavaScript or even by jQuery. However, if you are reluctant to use JavaScript for your app, then please check the browser compatibility of the methods.

← PreviousNext →