Validation of file size while uploading using JavaScript / jQuery

10 May, 2022
In this article, we will learn how to implement file size validation by checking file size before upload 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>  </body> <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> </html>
Output:Before uploading a file:  
If the file is greater than 4MB:  
If the file is less than 2MB:  
On successful upload:  
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.
Example-2:  
Javascript
<!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: Before uploading a file:  
If the file is less than 2MB or greater than 4MB:  
On successful upload:  
 
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.
japperan123
hardikkoriintern
JavaScript-Misc
Picked
HTML
JavaScript
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
REST API (Introduction)
CSS to put icon inside an input element in a form
Design a Tribute Page using HTML & CSS
Types of CSS (Cascading Style Sheet)
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
How to append HTML code to a div using JavaScript ?
Difference Between PUT and PATCH Request