While using file upload control we need to validate the file
extension before uploading the file on client side. So this article will show
you how to do client side validation of file type or extension permitted to upload
in Asp.Net using JavaScript.
Some of my previous articles are as follows: Ajax
FileUpload Control In Asp.Net or Multiple FileUpload With Progress Example in
Asp.Net Using C#.Net, File
Upload in MVC3 By Using Razor, Multiple
File Upload With Asp.Net MVC C# and HTML5 | How to upload files to ASP.NET MVC
application, File
Upload with ASP.NET | How to Use FileUpload Control in ASP.Net Using
C#.Net,VB.Net | Upload File in Asp.net and Save in Folder, Restrict
User to Upload File of a Specific Size in Asp.Net Using C#.Net, Restrict
User to Upload Only doc or .docx Using Fileupload in Asp.Net C#.Net.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="demoasp_net.Default"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Client
Side Validation of File Type or Extention Permited to Upload in Asp.Net
Using Javascript</title>
<script type="text/javascript">
/*For
validating file extention using javascript*/
function
ValidateUploadFileType() {
if
(document.getElementById("<%=FileUpload1.ClientID
%>").value
== "") {
alert("Please select the file to upload.");
return
false;
}
else
{
/*Getting
file upload control value*/
var
value = document.getElementById("<%=FileUpload1.ClientID
%>").value,
/*Getting
file extention*/
ext = value.split(".").pop();
if
(ext == "doc" || ext == "docx") {
alert("Thanks
You have selected correct file.");
return
true;
}
else
{
alert("Please select a valid file(.doc or .docx).");
return
false;
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div>
<h2>
File Type Validation</h2>
</div>
<asp:Label ID="Label1" runat="server" Style="color: #FF0000; font-size: medium" Text=""></asp:Label>
<br />
<asp:FileUpload ID="FileUpload1" runat="server"></asp:FileUpload>
<asp:Button ID="Button1" runat="server" Text="Upload" OnClientClick="javascript:return ValidateUploadFileType();"
OnClick="Button1_Click"></asp:Button>
</div>
</form>
</body>
</html>
|
Please check he below mention JavaScript code which is present
in above code.
<script type="text/javascript">
/*For
validating file extention using javascript*/
function
ValidateUploadFileType() {
if
(document.getElementById("<%=FileUpload1.ClientID
%>").value
== "") {
alert("Please select the file to upload.");
return
false;
}
else
{
/*Getting
file upload control value*/
var
value = document.getElementById("<%=FileUpload1.ClientID
%>").value,
/*Getting
file extention*/
ext = value.split(".").pop();
if
(ext == "doc" || ext == "docx") {
alert("Thanks
You have selected correct file.");
return
true;
}
else
{
alert("Please select a valid file(.doc or .docx).");
return
false;
}
}
}
</script>
|
In above code first we have checked that weather user have
selected any file or not if he has selected any file on that case then we have
find the extension of the file for validating the file type uploaded by the
user.
If he has selected correct file on that case post bask will
take place otherwise page will post and user will get error message to select
correct file.
Now run the application see the
output.
DOWNLOAD
About the Author
0 comments:
Please let me know your view