connectseekers.com

Friday, 18 July 2014

Client Side Validation of File Type or Extention Permited to Upload in Asp.Net Using Javascript

7/18/2014 - By Pranav Singh 0

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.

So for this article we will first we will create a new asp.et application and add a new page in this page add a fileupload control and a button control to perform the operation. Now check the below code.

<%@ 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

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Get Updates

Subscribe to our e-mail newsletter to receive updates.

Share This Post

0 comments:

Please let me know your view

Free Ebooks


About Us

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Contact Us

For writing article in this website please send request by your

GMAIL ID: dotnetpools@gmail.com
Email Id : contact@aspdotnet-pools.com

Bugs and Suggestions

As we all know that this website is for sharing knowledge and providing proper solution. So while reading the article is you find any bug or if you have any suggestion please mail us at contact@aspdotnet-pools.com.

Partners


Top jQuery Plugins

Global Classified : Connectseekers.com
© 2014
back to top