Hi friends,in this article I will explain about How to validate (check) File Size before upload using jQuery in ASP.NET.
The below code will help you to get the File Size before upload using jQuery in ASP.NET and restrict or validation for the max file size.
ASP.NET:
The below code will help you to get the File Size before upload using jQuery in ASP.NET and restrict or validation for the max file size.
ASP.NET:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"
runat="server">
<title>Validate
(check) File Size before upload using jQuery in ASP.NET</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#FileUpload1").change(function () {
var fileSize = ($(this).get(0).files[0].size
/ 1024);
if (fileSize / 1024 > 1) {
if (((fileSize / 1024) / 1024) > 1) {
fileSize = (Math.round(((fileSize / 1024) / 1024) * 100) / 100);
$("#fileSize").html("File Size is " + fileSize + "Gb");
}
else {
fileSize = (Math.round((fileSize / 1024) * 100) / 100)
$("#fileSize").html("File Size is " + fileSize + "Mb");
}
}
else {
fileSize =
(Math.round(fileSize * 100)/100)
$("#fileSize").html("File Size is " + fileSize + "kb");
// $("#fileSize").html("Thanking for selecting a valid file");
}
if ($(this).get(0).files[0].size
> (1024 * 1024 * 2)) {
$("#fileSize").css('color', 'red');
// alert("File size should not exceed 2 MB .");
}
else {
$("#fileSize").css('color', 'green');
$("#fileSize").html("File Size is " + fileSize + "kb");
}
});
});
</script>
<style type="text/css">
.failure
{
color: red;
}
.success
{
color: green;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="FileUpload1"
runat="server"
/>
<br />
<asp:Label ID="fileSize"
runat="server">
</asp:Label>
</div>
</form>
</body>
</html>
|
The output of the above code as shown in the below figure.
If you upload the file less than 2MB then the file size will be shown as green color.
If you upload the file less than 2MB then the file size will be shown as green color.
If you upload the file greater than 2MB then the file size will be shown as red color.
If you uncomment the lines in the above code then the output of the above code as shown in the below figure
%2Bfile%2Bsize%2Busing%2Bjquery%2Bin%2BFile%2BUpload%2BControl%2Bin%2Basp.net.gif)
You can download the code by clicking on the below Download image.
No comments:
Post a Comment