Introduction:
In this article i am going to explain How to restrict uploading files larger
than the maximum specified file size by validating the file size client side using
JavaScript when selecting the image/file through asp.net fileupload control.
In previous articles i explained How to Validate and restrict user to upload images of up to specified size and Validate file extension while uploading image or file through File Upload control using JavaScript and Server side Validate and upload image files and upload,store image in binary format into SQL server database and retrieve using asp.net and Bind,upload,download,delete image files from the GridView and jQuery to enlarge thumbnail image in slider on mouse over
Description: I am using JavaScript code
to check the file size of the file selected by asp.net file upload control and
if the file size is more than the maximum allowed size then custom message
can be displayed to the user as shown in the demo image above.
Note: In this example, the maximum allowed file size is 1 mb (1048576 bytes). This value can be changed as per requirement.
Below is the HTML Source of the
page having file upload control and file size validation implemented.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>File size validation using JavaScript</title>
<script type="text/javascript">
function validateFileSize() {
var uploadControl =
document.getElementById('<%= FileUpload1.ClientID %>');
if (uploadControl.files[0].size >
1048576) {
document.getElementById('dvMsg').style.display
= "block";
return false;
}
else {
document.getElementById('dvMsg').style.display
= "none";
return
true;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<fieldset style="width:250px;">
<legend>Validate file size before upload</legend>
<asp:FileUpload ID="FileUpload1"
runat="server"
onchange="validateFileSize();"
/>
<div id="dvMsg" style="background-color:Red; color:White; width:190px; padding:3px; display:none;" >
Maximum size allowed is 1 MB
</div>
</fieldset>
</div>
</form>
</body>
</html>
Now over to you:
" I hope you have got the way to validate file size before uploading using java script in Asp.Net MVC and
If you like my work; you can appreciate by leaving your comments, hitting
Facebook like button, following on Google+, Twitter, Linked in and Pinterest,
stumbling my posts on stumble upon and subscribing for receiving free updates
directly to your inbox . Stay tuned and stay connected for more technical
updates."
2 comments
Click here for commentsThank you!!!!!!!
ReplyThanks for you feedback..I am glad you liked my article..stay connected and keep reading...
ReplyIf you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..