Skip to content
Related Articles

Related Articles

Validation of file size while uploading using JavaScript / jQuery

Improve Article
Save Article
  • Difficulty Level : Medium
  • Last Updated : 15 Nov, 2022
Improve Article
Save Article

In this article, we will learn how to implement file size validation by checking file size before uploading using Javascript and jQuery. This is a demonstration of client-side validation and is implemented to provide a nice user experience. In some cases, client-side validation is a much better method in comparison to the server-side method as it consumes less time. 
For instance, if we don’t allow uploading a file more than 4MB or less than 2MB, we could use client-side validation to check that the file the user has chosen follows the given requirements and if it doesn’t, give them a message so they don’t spend all the time uploading the file only to get an error thrown away by the server.

Approach 1: 

  • 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 as you desire, Megabytes in this case by Math.round((filesize/1024)).
  • Check if the size follows your desired criteria.

Example 1:  

Javascript




<!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:
 

 

Approach 2: 
In the below example, we will learn how to do the same using jQuery. 

  • 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.

Approach 2:  

Javascript




<!DOCTYPE HTML>
<html>
  
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>JQuery File Validation</title>
    </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: 
 

 

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.


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!