Click here to Skip to main content
13,803,704 members
Click here to Skip to main content
Add your own
alternative version


10 bookmarked
Posted 16 Jul 2013
Licenced CPOL

Upload a file with required validation using jQuery

, 16 Jul 2013
Rate this:
Please Sign up or sign in to vote.
Uploading a File with the required validation


In this example, I will explain how to specify what file can be selected for uploading from a FileUpload control and until the valid file is selected the Upload button would be disabled. The complete validation process would be done with jQuery. And we will also see how to display a label instead of an alert message box.


In many forums, I see the question of how to validate the required file using JavaScript or jQuery.

When you click on the Browse button, a window will be opened in the client side.

Select any file and click the Open button. If you selected only .Jpg or .JPEG files, the Upload button would be enabled. Try out with both, like select a .jpg file and check if you can see the Upload button. If you click any other file than a .jpg extension file, then you would see a message saying that “Only '.jpeg','.jpg' formats are allowed”.

Selecting a non .jpg extension:

Selecting a .jpg file:

Using the code

In the file extension we have taken only .jpg or .jpeg files and we are checking weather the selected file from fileupload is a .jpg or not? If it is not a .jpg or .jpeg then we are displaying a label message Only .jpg format is allowed. If it's a .jpg file then we are enabling the upload button.

<script src="//"></script> 
<script type="text/javascript">
    $(function () {
        $('#<%=fuPhoto.ClientID %>').change(
            function () {
                var fileExtension = ['jpeg', 'jpg'];
                if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
                    // alert("Only '.jpeg','.jpg' formats are allowed.");
                    $('#<%=btnUpload.ClientID %>').attr("disabled", true);
                    $('#<%= myLabel.ClientID %>').html("Only '.jpeg','.jpg' formats are allowed.");
                else {
                    $('#<%=btnUpload.ClientID %>').attr("disabled", false);
                    $('#<%= myLabel.ClientID %>').html(" ");
<form id="form1" runat="server">
    <asp:FileUpload ID="fuPhoto" runat="server" />
    <asp:Button ID="btnUpload" Text="Upload" runat="server" Enabled="false" />
    <asp:Label ID="myLabel" runat="server" ForeColor="#CC0000" />

In the file extension, you can write your own extensions as per your requirements, like .gif, .doc, .ppt etc.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Mannava Siva Aditya
Web Developer
India India
I am a 29 year old software Web Developer from Hyderabad, India. I have been working since approximately age 25. Where as in IT Development industry since 27. I am Microsoft Certified Technology Specialist.

I have taught myself in development, beginning with Microsoft's technologies ASP.NET, Approximately 3 years ago, I was given an opportunity to work as a freelance in the tech field. Now I am working as a web developer where my roles make me purely in web based technology solutions which manage and control access to applications and patient information stored in legacy systems, client-server applications.

I too had an opportunity to train some IT professionals with technical skills in development area. Which became my passion.

I have worked on various .NET framework versions(2.0 , 3.5, 4.0) and have been learning every new technology being introduced. Currently, I am looking forward to working in R & D in .Net to create distributed, reusable applications.

You may also be interested in...


Comments and Discussions

SuggestionUpload a File with the required validation and Regular expression validator Pin
Mukund Thakker3-Aug-13 3:36
professionalMukund Thakker3-Aug-13 3:36 
QuestionIs there a way to other file attributes? Pin
BobbyPhillips17-Jul-13 13:05
memberBobbyPhillips17-Jul-13 13:05 
AnswerRe: Is there a way to other file attributes? Pin
Mannava Siva Aditya17-Jul-13 19:59
memberMannava Siva Aditya17-Jul-13 19:59 
GeneralRe: Is there a way to other file attributes? Pin
BobbyPhillips18-Jul-13 11:55
memberBobbyPhillips18-Jul-13 11:55 
GeneralRe: Is there a way to other file attributes? Pin
Mannava Siva Aditya18-Jul-13 20:01
memberMannava Siva Aditya18-Jul-13 20:01 
GeneralRe: Is there a way to other file attributes? Pin
Shaik Akram31-Mar-14 1:24
professionalShaik Akram31-Mar-14 1:24 
GeneralMy vote of 5 Pin
Anurag Gandhi17-Jul-13 5:57
professionalAnurag Gandhi17-Jul-13 5:57 
Nice Tip!!
I really needed it. Thanks.
GeneralRe: My vote of 5 Pin
Mannava Siva Aditya17-Jul-13 6:11
memberMannava Siva Aditya17-Jul-13 6:11 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web05 | 2.8.181215.1 | Last Updated 16 Jul 2013
Article Copyright 2013 by Mannava Siva Aditya
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid