Get file size before upload using jquery

Get file size before upload using jquery

13 Feb 2024
Intermediate
4.51K Views
2 min read

File uploading functionality is generally used by the developers. Before uploading file on the server, to know the size of file is a good practice. By knowing file size, we can restrict the end user to upload large size files on the server since we have limited space on the server. We should check uploaded file size on server side as well client side. In this article I am going to expose how you can get size of file before uploading on client side using JQuery. For more help refer the article Asp.Net asynchronous file upload using jquery.

Example to get file size before upload using JQuery

 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Get File Size</title> 
 <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript" > </script>
 <script type="text/javascript">
 function GetFileSize(fileid) {
 try {
 var fileSize = 0;
 //for IE
 if ($.browser.msie) {
 //before making an object of ActiveXObject, 
 //please make sure ActiveX is enabled in your IE browser
 var objFSO = new ActiveXObject("Scripting.FileSystemObject"); var filePath = $("#" + fileid)[0].value;
 var objFile = objFSO.getFile(filePath);
 var fileSize = objFile.size; //size in kb
 fileSize = fileSize / 1048576; //size in mb 
 }
 //for FF, Safari, Opeara and Others
 else {
 fileSize = $("#" + fileid)[0].files[0].size //size in kb
 fileSize = fileSize / 1048576; //size in mb 
 }
 alert("Uploaded File Size is" + fileSize + "MB");
 }
 catch (e) {
 alert("Error is :" + e);
 }
}
 </script>
</head>
<body>
<form name="upload" action="">
<input type="file" name="fUpload" id="fUpload" />
<input type="button" value="Get File Size" onclick="GetFileSize('fUpload');" />
</form>
</body>
</html> 

Read More - jQuery Interview Questions for Experienced

Example to get file size before upload in Asp.Net using JQuery

Using above defined function "GetFileSize", we can also get file size in Asp.net also like as :

 <form id="form1" runat="server"> 
<asp:FileUpload ID="fUpload" runat="server" />
 <asp:Button ID="btnGetSize" runat="server" Text="Button" OnClientClick="GetFileSize('fUpload');" /> 
</form> 

Above example will work on all browsers including IE, FF, Chrome, Safari, Opera etc.

Summary

In this article I try to expose how you can get size of file before uplaoding. I hope after reading this article you will be able to use this trick in your code. I would like to have feedback from my blog readers. Please post your feedback, question, or comments about this article.

Share Article

Live Classes Schedule

Our learn-by-building-project method enables you to build practical/coding experience that sticks. 95% of our learners say they have confidence and remember more when they learn by building real world projects.
Generative AI For Software Developers Jul 20 SAT, SUN
Filling Fast
08:30PM to 10:30PM (IST)
Get Details
Angular Certification Course Jul 20 SAT, SUN
Filling Fast
06:00PM to 08:00PM (IST)
Get Details
Azure Master Class Jul 20 SAT, SUN
Filling Fast
03:00PM to 05:00PM (IST)
Get Details
ASP.NET Core Certification Training Jul 28 SAT, SUN
Filling Fast
07:00AM to 09:00AM (IST)
Get Details
Software Architecture and Design Training Jul 28 SAT, SUN
Filling Fast
05:30PM to 07:30PM (IST)
Get Details
.NET Solution Architect Certification Training Jul 28 SAT, SUN
Filling Fast
05:30PM to 07:30PM (IST)
Get Details
Azure Developer Certification Training Jul 28 SAT, SUN
Filling Fast
10:00AM to 12:00PM (IST)
Get Details
Advanced Full-Stack .NET Developer Certification Training Jul 28 SAT, SUN
Filling Fast
07:00AM to 09:00AM (IST)
Get Details
Data Structures and Algorithms Training with C# Jul 28 SAT, SUN
Filling Fast
08:30PM to 10:30PM (IST)
Get Details
Angular Certification Course Aug 11 SAT, SUN
Filling Fast
09:30AM to 11:30AM (IST)
Get Details
ASP.NET Core Project Aug 24 SAT, SUN
Filling Fast
07:00AM to 09:00AM (IST)
Get Details

Can't find convenient schedule? Let us know

About Author
Shailendra Chauhan (Microsoft MVP, Founder & CEO at Scholarhat by DotNetTricks)

Shailendra Chauhan is the Founder and CEO at ScholarHat by DotNetTricks which is a brand when it comes to e-Learning. He provides training and consultation over an array of technologies like Cloud, .NET, Angular, React, Node, Microservices, Containers and Mobile Apps development. He has been awarded Microsoft MVP 8th time in a row (2016-2023). He has changed many lives with his writings and unique training programs. He has a number of most sought-after books to his name which has helped job aspirants in cracking tough interviews with ease.
Self-paced Membership
  • 22+ Video Courses
  • 800+ Hands-On Labs
  • 400+ Quick Notes
  • 55+ Skill Tests
  • 45+ Interview Q&A Courses
  • 10+ Real-world Projects
  • Career Coaching Sessions
  • Email Support
Upto 60% OFF
Know More
Accept cookies & close this