Asp.net Fileupload control - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial


Asp.net Fileupload control

In this article I am going to explain about Asp.net Fileupload control.


Description:
We use the Fileupload control to upload the files. Here I am going to explain all about Fileupload control like how to set file type, validate file type, file size etc.
 Implementation:

Fileupload control have option to set which type of file you want to upload. In this example I want to upload PDF file, so I have set accept property only PDF files. When we will going to upload files it will show only PDF files.

Example:
<asp:FileUpload ID="FileUpload1" runat="server" accept=".pdf"/>

If want to upload images in that case set accept=".jpg,.png,.gif,.jpeg"

Validate Fileupload Control:
To validate upload control I am using require filed and regular expression validation control.
Validation Expression to validate PDF file :  ValidationExpression="^.*\.(pdf)$"
If want to validate more file types set file extension in validation expression. E.g. accept="^.*\.(jpg|JPG|gif|GIF|doc|DOC|DOCX)$"

Example:

<table>
            <asp:ValidationSummary ID="ValidationSummary1" runat="server" ShowMessageBox="true" ShowSummary="false"/>
            <tr><td>Upload File :</td><td><asp:FileUpload ID="FileUpload1" runat="server" accept=".pdf"/>
                <asp:RequiredFieldValidator ID="rfvfileupload" runat="server" Display="None" ErrorMessage="Please upload File" ControlToValidate="FileUpload1"></asp:RequiredFieldValidator>
                <asp:RegularExpressionValidator ID="regexfileupload" runat="server" Display="None" ErrorMessage="Please upload only PDF file" ValidationExpression="^.*\.(pdf)$" ControlToValidate="FileUpload1"></asp:RegularExpressionValidator></td></tr>
             <tr><td></td><td> <asp:Button ID="Button1" runat="server" Text="Save" /></td></tr>
        </table>


Validate File size
We can validate the file size using jquey (client side) or using code (server side). I want to upload upto 1 MB file.

Here is Jquery function:

<script type="text/javascript" >
     function ValidateFilesize() {
         var maxFileSize = 1096000;
         var uploadedFile = document.getElementById("<%=FileUpload1.ClientID %>");
         if (uploadedFile.files[0].size > maxFileSize)
          {
             alert('File size should be less than 1MB')
             return false;
          }        
          return true;
      }
   </script>


Complete HTML Markup

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <script type="text/javascript" >
     function ValidateFilesize() {
         var maxFileSize = 1096000;
         var uploadedFile = document.getElementById("<%=FileUpload1.ClientID %>");
         if (uploadedFile.files[0].size > maxFileSize)
          {
             alert('File size should be less than 1MB')
             return false;
          }        
          return true;
      }
   </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr><td>Upload File :</td><td><asp:FileUpload ID="FileUpload1" runat="server"/> </td></tr>
            <tr><td></td><td> <asp:Button ID="Button1" runat="server" Text="Save" OnClientClick="return ValidateFilesize();"  OnClick="Button1_Click" /></td></tr>
        </table>
    </div>
    </form>      
</body>
</html>


To validate on button click write the below given code

C# code:
protected void Button1_Click(object sender, EventArgs e)
    {
        if (FileUpload1.FileBytes.Length > 1096000)
        {
            //Show message File size should be less than 1MB
        }
        else
        {
           //save File
        }
    }

VB.net Code:

Protected Sub Button1_Click(sender As Object, e As EventArgs)
        If FileUpload1.FileBytes.Length > 1096000 Then
                    'Show message File size should be less than 1MB
        Else
'save File
        End If
    End Sub


Output :
Asp.net Fileupload control


What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon