How to get the input file size in jQuery ?

0 0 1 minute read

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;">  
        zambiatek  
    </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;">  
        zambiatek  
    </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>                     