In this example, i will show you how to allow only specific file type ('jpeg', 'jpg', 'png', 'gif', 'bmp') to upload in asp.net using jQuery. Let’s start.
First, i have included Microsoft CDN jQuery reference file under the head section of Default.aspx page. I have created a function which will simply get a full file path then split it with dot(.), and i have used pop() method to get last element of split string.
Here’s an example.
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Restrict File Upload using jQuery in asp.net File Upload Control</title>
<style type="text/css">
html, body
{
font-family: Verdana;
font-weight: 10px;
}
.alert
{
color: Red;
}
</style>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
var AllowedExtension = ['jpeg', 'jpg', 'png', 'gif', 'bmp'];
$("#<%=FileUpload1.ClientID %>").change(function () {
if ($.inArray($(this).val().split('.').pop().toLowerCase(), AllowedExtension) == -1) {
$("#<%=msg.ClientID %>").text("Only \'jpeg\', \'jpg\', \'png\', \'gif\', \'bmp\' are allowed.");
} else {
$("#<%=msg.ClientID %>").text("");
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2>Restrict File Upload using jQuery in asp.net File Upload Control</h2>
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Label ID="msg" runat="server" Text="" CssClass="alert"></asp:Label>
</div>
<p>
<a href="http://www.aspxtutorial.com/">.NET Articles</a><br />
Author:Aamir Hasan
</p>
</form>
</body>
</html>
Output
Download
File Upload Control .zip (1.18 kb)
See live demo