Category >
ASP.NET
|| Published on :
Monday, February 8, 2016 || Views:
11280
||
jQuery to Validate File Type and Size before Uploading through Asp.Net FileUpload Control jQuery to Validate File Type
Introduction
Here Pawan Kumar will explain how to jQuery to Validate File Type and Size before Uploading through Asp.Net FileUpload Control
Description
In previous post I have explained
jQuery, ASP.NET - How to validate the file type and file size of File Upload control on file selection using the jQuery .Change() event,
Create a QR Code with a Logo in ASP.Net C#,
jQuery to Check UnCheck All CheckBoxes in Repeater in Asp.Net C#,
Check UnCheck All CheckBoxes in Asp.Net GridView using jQuery,
Asp.Net Serialization & Deserialization with C#.Net,
jQuery to Dynamically Change or Set Placeholder Text in Asp.Net TextBox, and many more articles.
Now I will explain How to jQuery to Validate File Type and Size before Uploading through Asp.Net FileUpload Control
So follow the steps to learn jQuery to Validate File Type and Size before Uploading through Asp.Net FileUpload Control
In this article we are going to learn how to validate filetype or file extension with file size of the file uploaded through ASP.NET FileUpload Control before actually uploading using jQuery
While developing forms for any asp.net application, it is very common requirement to check upload files extension(pg, jpeg, png, bmp, gif etc or document files e.g. pdf, doc, docx, xls, xlsx, txt, rtf) before uploading to the Server.
This situation can be tackle at two ends i.e. Client Side and Server Side. but to check the file type or size at server side through code, First File must be uploaded into the Server memory, which is time consuming, if file size is large. To avoid this type of issue, We can validate File type and Size at client side using jQuery before actually uploading the file to Server
so, lets starts the fun part... yes coding.
Step 1: Create a new website using Visual Studio 2010
Step 2: Add a new webform and name it default2.aspx.
Step 3: Add the following code to the aspx webpage
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Blog Post - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/blog-post.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
.error {
background-color: #d9534f;
font-weight: 300;
font-size: 12px;
padding: 3px 6px 3px 6px;
color: #fff;
text-align: center;
white-space: nowrap;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#FileUpload1").change(function () {
// Get uploaded file extension
var extension = $(this).val().split('.').pop().toLowerCase();
// Create array with the files extensions that we wish to upload
var validFileExtensions = ['jpeg', 'jpg', 'png', 'gif', 'bmp'];
//Check file extension in the array.if -1 that means the file extension is not in the list.
if ($.inArray(extension, validFileExtensions) == -1) {
$('#spnDocMsg').text("Sorry!! Upload only jpg, jpeg, png, gif, bmp file").show();
// Clear fileuload control selected file
$(this).replaceWith($(this).val('').clone(true));
//Disable Submit Button
$('#btnSubmit').prop('disabled', true);
}
else {
// Check and restrict the file size to 32 KB.
if ($(this).get(0).files[0].size > (32768)) {
$('#spnDocMsg').text("Sorry!! Max allowed file size is 32 kb").show();
// Clear fileuload control selected file
$(this).replaceWith($(this).val('').clone(true));
//Disable Submit Button
$('#btnSubmit').prop('disabled', true);
}
else {
//Clear and Hide message span
$('#spnDocMsg').text('').hide();
//Enable Submit Button
$('#btnSubmit').prop('disabled', false);
}
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://www.sourcecodehub.com">SourceCodeHub.com</a>
</div>
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<div class="row">
<!-- Blog Post Content Column -->
<div class="col-lg-12">
<!-- Blog Post -->
<!-- Title -->
<h1>Validate File Size and Type before upload</h1>
<fieldset style="width: 350px">
<legend></legend>
Upload File:
<asp:FileUpload ID="FileUpload1" runat="server" /><br />
<span id="spnDocMsg" class="error" style="display: none;"></span>
<br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" ClientIDMode="Static" />
</fieldset>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © www.sourcecodehub.com 2016</p>
</div>
</div>
<!-- /.row -->
</footer>
</div>
<!-- /.container -->
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</form>
</body>
</html>
Conclusion:
So, In this tutorial we have learned, jQuery to Validate File Type and Size before Uploading through Asp.Net FileUpload Control
Download Source Codes