How to get the input file size in jQuery ?

21 Jun, 2019
The task is to get the fileSize when a user uploads it using JQuery.
Approach:
Display the text Choose file from system to get the fileSize on the screen.
Click on the browse button to select the upload file.
After selecting a file, the function is called which display the size of the selected file.
The function uses file.size method to display the file size in bytes.
Example 1: This example adds an event to the input[type=file] element and when user uploads the file, the size of the file prints on screen.
<!DOCTYPE html><html>  <head>    <title>        How to get the input file size in jQuery ?    </title>          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">    </script></head>  <body style="text-align:center;">          <h1 style="color:green;">         GeeksforGeeks     </h1>          <p id="GFG_UP" style=        "font-size: 15px; font-weight: bold;">    </p>          <input type="file" id="File" />          <br><br>          <p id="GFG_DOWN" style=        "color:green; font-size: 20px; font-weight: bold;">    </p>          <script>        $('#GFG_UP').text("Choose file from system to get the fileSize");        $('#File').on('change', function() {            $('#GFG_DOWN').text(this.files[0].size + "bytes");        });    </script></body>  </html>                    
Output:
Before selecting the file:
After selecting the file:
Example 2: This example adds an event to the input[type=file] element and when user uploads the file, the size of the file prints on screen. This example allows the users to upload file of size lesser than 2MB.
<!DOCTYPE html><html>  <head>    <title>        How to get the input file size in jQuery ?    </title>          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">    </script></head>  <body style="text-align:center;">    <h1 style="color:green;">         GeeksforGeeks     </h1>          <p id="GFG_UP" style=        "font-size: 15px; font-weight: bold;">    </p>          <input type="file" id="File" />          <br><br>          <p id="GFG_DOWN" style=        "color:green; font-size: 20px; font-weight: bold;">    </p>          <script>        $('#GFG_UP').text("Choose file from system to get the fileSize");        $('#File').on('change', function() {            if (this.files[0].size > 2097152) {                alert("Try to upload file less than 2MB!");            } else {                $('#GFG_DOWN').text(this.files[0].size + "bytes");            }        });    </script></body>  </html>                    
Output:
Before selecting the file:
After selecting the file(size>2MB):
jQuery-HTML/CSS
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
Roadmap to Learn JavaScript For Beginners
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?