aspx Tutorial

NET Articles,jQuery demo, asp.net with jQuery, online tutorial,Jquery, SilverLight, Javascript, asp.net,JSON, MVC,.NET Articles,demo, Web Services,
Advertise Here

Toolbar

Get our toolbar!

Advertize



Posted by Aamir Hasan   on Friday, November 19, 2010 Total Views:  

In this example, i will show you how to allow only specific file type ('jpeg', 'jpg', 'png', 'gif', 'bmp') to upload in asp.net using jQuery. Let’s start.

First, i have included Microsoft CDN jQuery reference file under the head section of Default.aspx page. I have created a function which will simply get a full file path then split it with dot(.), and i have used pop() method to get last element of split string.

Here’s an example.

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

   <title>Restrict File Upload using jQuery in asp.net File Upload Control</title>

   <style type="text/css">

       html, body

       {

           font-family: Verdana;

           font-weight: 10px;

       }

       .alert

       {

           color: Red;

       }

   </style>

   <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js" type="text/javascript"></script>

   <script language="javascript" type="text/javascript">

       $(document).ready(function () {

           var AllowedExtension = ['jpeg', 'jpg', 'png', 'gif', 'bmp'];

           $("#<%=FileUpload1.ClientID %>").change(function () {

               if ($.inArray($(this).val().split('.').pop().toLowerCase(), AllowedExtension) == -1) {

                   $("#<%=msg.ClientID %>").text("Only \'jpeg\', \'jpg\', \'png\', \'gif\', \'bmp\' are allowed.");

               } else {

                   $("#<%=msg.ClientID %>").text("");

               }

           });

       });

   </script>

</head>

<body>

   <form id="form1" runat="server">

   <div>

       <h2>Restrict File Upload using jQuery in asp.net File Upload Control</h2>

       <asp:FileUpload ID="FileUpload1" runat="server" />

       <asp:Label ID="msg" runat="server" Text="" CssClass="alert"></asp:Label>

   </div>

   <p>    

   <a href="http://www.aspxtutorial.com/">.NET Articles</a><br />

   Author:Aamir Hasan

   </p>

   </form>

</body>

</html>

Output

Download

File Upload Control .zip (1.18 kb)

See live demo

Protected by Copyscape Online Plagiarism Tool

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Advertizement 1
Advertizement 2
Advertizement 3
Advertizement 4
Advertizement 5