In this article I am going to explain about Asp.net Fileupload
control.
In previous article I have
explained how to insert all records of table to another existing table in Sqlserver, how to export multiple Datatables data to excel file using CloseXml inasp.net and how to export Datatable data to excel using CloseXml in asp.net.
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 :
.png)
No comments:
Post a Comment