Validation of file size while uploading using JavaScript / jQuery

Last Updated : 16 Sep, 2024

Validating the file size before uploading is an important step in enhancing user experience on a website. It helps prevent large files from being uploaded, which could lead to slow uploads, server overload, or bandwidth issues.

Why File Size Validation is Important

Improves User Experience: Prevents users from uploading files that are too large, saving time and reducing frustration.
Optimizes Performance: Helps maintain server performance by avoiding large, unnecessary uploads.
Saves Bandwidth: Reduces the amount of data transferred, which can be crucial for users on limited data plans.

Below are both the ways:

Table of Content

Using JavaScript
Using jQuery

Approach 1: Using JavaScript

Listen for the change event on the input.
Check if any file is selected files.length > 0.
Get the size of the file by files.item(i).size.
The value will be in bytes. Convert it into any unit you desire, Megabytes in this case by Math.round((filesize/1024)).
Check if the size follows your desired criteria.

Example: This example shows the use of the above-explained approach.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>File Validation-1</title>
</head>

<body>
    <p>
        <input type="file" id="file" 
               onchange="Filevalidation()" />
    </p>

    <p id="size"></p>

    <script>
        Filevalidation = () => {
            const fi = document.getElementById('file');
            // Check if any file is selected.
            if (fi.files.length > 0) {
                for (const i = 0; i <= fi.files.length - 1; i++) {

                    const fsize = fi.files.item(i).size;
                    const file = Math.round((fsize / 1024));
                    // The size of the file.
                    if (file >= 4096) {
                        alert(
        "File too Big, please select a file less than 4mb");
                    } else if (file < 2048) {
                        alert(
        "File too small, please select a file greater than 2mb");
                    } else {
                        document.getElementById('size').innerHTML = 
                          '<b>'+ file + '</b> KB';
                    }
                }
            }
        }
    </script>
</body>

</html>

Output:

choooseeee

Approach 2: Using jQuery

In this approach, we will listen for the change event on the input.
Get the size of the file by this.files[0].size.
You can round off the obtained value as well by toFixed() method.
Check if the size follows your desired criteria.

Example: This example shows the use of the above-explained approach.

HTML

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" 
          content="text/html; charset=iso-8859-1" />
    <title>JQuery File Validation</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
</head>

<body>
    <input id="file" type="file" name="file" />
    <p id="output"></p>

    <script type="text/javascript">
        $('#file').on('change', function() {
        
            const size = 
               (this.files[0].size / 1024 / 1024).toFixed(2);
        
            if (size > 4 || size < 2) {
                alert("File must be between the size of 2-4 MB");
            } else {
                $("#output").html('<b>' +
                   'This file size is: ' + size + " MB" + '</b>');
            }
        });
    </script>
</body>
</html>

Output:

choooseeee

Additional Tips

Choose the Right Unit: Convert file sizes to a unit that makes sense for your validation (e.g., KB, MB).
Set Reasonable Limits: Decide on an appropriate file size limit based on your server capacity and user needs.
Handle Multiple Files: If your input allows multiple file uploads, loop through the files and validate each one individually.

JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.

Twitter Like Character Count Validation using jQuery

AnkitMishra16

Improve

Article Tags :

Validation of file size while uploading using JavaScript / jQuery

Why File Size Validation is Important

Approach 1: Using JavaScript

Approach 2: Using jQuery

Additional Tips

Similar Reads

Thank You!

What kind of Experience do you want to share?