Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to get the input file size in jQuery ?

  • Last Updated : 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=
    </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=
    </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):

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!