I have already written an article on how to validate the file types and file extensions in AJAX Control Toolkit AsyncFileUpload Control. You can refer it using the link provided below
Now using the same script I have created a jQuery plugin to make it easy to use. So here’s what you need to do to use it
HTML Markup
Below is the HTML Markup and it has an AJAX Control Toolkit AsyncFileUpload Control and a Label Control to display the error message. That’s all we need to make our plugin work.
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager2" runat="server"></asp:ScriptManager>
<cc1:AsyncFileUpload runat="server" ID="AsyncFileUpload2" Width="400px" UploaderStyle="Modern" CompleteBackColor="White" UploadingBackColor="#CCFFFF" ThrobberID="imgLoader" OnUploadedComplete="FileUploadComplete" />
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/loader.gif" />
<br />
<asp:Label ID="Label1" runat="server" style = "color:red" Text = "Upload a valid file with extension doc, docx." />
</form>
Plugin Usage
Now it’s time to see the jQuery plugin in action.
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/AsyncFileUploadValidationPlugin.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#<%=AsyncFileUpload1.ClientID %>").Validate(
{
MessageControlId: "<%=lblMesg.ClientID%>",
ValidFileExtensions: ["doc", "docx"]
});
});
</script>
The plugin has two options that you need to specify
1. MessageControlId - Id of the control which will display the message when the validation fails.
2. ValidFileExtensions – Extensions of the File types which the user is allowed to upload.
That’s all you need to do to make it work.
Note:- If you do not specify the valid file extensions then by default all file types will be allowed
Downloads
You can download the complete source code and the plugin using the download link provided below.
Download Code
The plugin is also submitted on the jQuery site. You can refer it using the following link
