In this article I will explain with an example, how to filter files based on extensions in ASP.Net FileUpload control using
jQuery.
HTML Markup
The HTML Markup consists of:
FileUpload – For selecting file.
Button – For validating file.
Label – For displaying eror message.
<asp:FileUpload ID="fuUpload" runat="server" />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
<br />
<asp:Label ID="lblMessage" runat="server" ForeColor="Red" />
Validating Files based on Extensions using jQuery
Inside the HTML, following
jQuery JS file is inherited.
1. jquery.min.js
The Button has been assigned with a
jQuery click event handler.
When the Button is clicked, the file extension of the selected file is determined and an Array of valid file type is defined.
The following Array can be easily set with valid file extensions as per your requirement.
var validFilesTypes = ["doc", "docx", "pdf"];
Then, the file extension is verified whether exists or not in the Array using the Array.includes function and if it doesn’t exists then error message is set in the Label control.
Finally, the FALSE is returned.
Note: The following script must be placed below the HTML elements as it makes use of document.on function.
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$("[id*=btnSubmit]").on("click", function () {
var lblMessage = $("[id*=lblMessage]");
$(lblMessage).html("");
var filePath = $("[id*=fuUpload]")[0].value;
var extension = filePath.substring(filePath.lastIndexOf(".") + 1, filePath.length).toLowerCase();
var validFilesTypes = ["doc", "docx", "pdf"];
if (!validFilesTypes.includes(extension)) {
$(lblMessage).html("Invalid File. Please upload file with extension: " + validFilesTypes.join(", ") + ".");
return false;
}
});
</script>
Screenshot
![Filtering Files based on Extensions in ASP.Net FileUpload Control using jQuery]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
