Open In App

Validation of file size while uploading using JavaScript / jQuery

Improve
Improve
Like Article
Like
Save
Share
Report

Validation of file size while uploading is important to provide a nice user experience. In this article, we will learn how to implement file size validation by checking file size before uploading using Javascript and jQuery.

Below are both the ways:

Table of Content

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=
    </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

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.



Last Updated : 14 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads