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):
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...