Please enable Javascript to correctly display the contents on Dot Net Tricks!

Get file size before upload using jquery

  Author : Shailendra Chauhan
Updated On : 24 Sep 2016
Total Views : 28,996   
 

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> 

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.


YOU MIGHT LIKE
Free Interview Books
 
COMMENTS (0)
13 FEB
ASP.NET Core Development (online)

07:00 AM-09:00 AM IST( MON, WED, FRI)

Know More
25 JAN
Angular2 and Angular1 Development (online)

09:00 PM-10:30 PM IST(MON-FRI)

Know More
24 JAN
ASP.NET MVC with Angular2 Development (online)

07:00 AM-09:00 AM IST(Tuesday & Thursday)

Know More
20 JAN
NODEJS & MEAN Stack 2 Development (online)

09:00 PM-11:00 PM IST( MON, WED, FRI)

Know More
15 JAN
PPC Marketing (offline)

04:00 PM-05:300 PM

14 JAN
Xamarin Forms : Build Cross-platform Apps (offline)

05:00 PM-06:30 PM IST

10 JAN
ASP.NET MVC with AngularJS Development (online)

09:00 PM-11:00 PM IST on (TUE, THRU,SAT)

3 JAN
ASP.NET MVC with AngularJS Development (online)

07:00 AM-09:00 AM IST

31 DEC
ASP.NET MVC with AngularJS Development (offline)

09:30 AM-11:00 AM

31 DEC
Angular2 and Angular1 Development (offline)

11:00 AM-12:30 AM

26 NOV
ASP.NET MVC with AngularJS Development (offline)

03:00 PM-04:30 PM

5 NOV
ASP.NET MVC with AngularJS Development (offline)

08:00 AM-09:30 AM

4 SEP
MEAN Stack 2 Development (offline)

11:00 AM-12:30 PM.

BROWSE BY CATEGORY
 
RECENT ARTICLES
SUBSCRIBE TO LATEST NEWS
 
LIKE US ON FACEBOOK
 

Professional Speaks

+