In this article I will explain with an example, how to validate File in INPUT Type File (FileUpload) using
jQuery in HTML.
HTML Markup
The following HTML Markup consists of:
FileUpload – For selecting file.
Button – For validating selected file.
SPAN – For displaying error message.
<input id="fuUpload" type="file"/>
<input id="btnSubmit" type="submit" value="Submit" />
<br />
<span id="lblMessage" style="color: red"></span>
Validating File in INPUT Type File (FileUpload) using jQuery
Inside the HTML, following
jQuery JS script file is inherited.
1. jquery.min.js
Inside the HTML, the Button has been assigned with a
jQuery click event handler.
When 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 returned value is set in IsValidFile variable.
Finally, if isValidFile variable is FALSE then, the error message is set in the SPAN element and the FALSE is returned.
<script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnSubmit").on("click", function () {
var filePath = $("#fuUpload")[0].value;
var label = $("#lblMessage");
label.html("");
var extension = filePath.substring(filePath.lastIndexOf(".") + 1, filePath.length).toLowerCase();
var validFilesTypes = ["pdf", "doc", "docx"];
var isValidFile = validFilesTypes.includes(extension);
if (!isValidFile) {
label.html("Invalid File. Please upload file with extension: " + validFilesTypes.join(", ") + ".");
return false;
}
});
});
</script>
Screenshot
![Validate File in INPUT Type File (FileUpload) using jQuery in HTML]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
