It is very simple to upload files in asp.net using File
Upload Control with Ajax Update Panel and Update Progress, but some important points
you need to remember while uploading files on server. Few things you need to
remember:
·
Using Update Panel place your File Upload control
inside Update Panel
·
Use PostBackTrigger inside update panel ,
without using the shows blank when you Upload
·
Use UpdateProgress and associate Update panel ID
with your Update panel
·
Inside Progress Temple place your loader Image
or Text
·
Write a JavaScript code to show your Progress
Panel active
·
Call your JavaScript function on OnClientClick
of Upload Button
·
If you face the problem while uploading files because
of file size and getting time out or 404 error, (in asp.net only 4096 KB i.e. 4 MB) are
allowed to upload. Then you need to make changes in your web.config as below
·
You need to increase time out also in web.config
(by default it is 110 sec only)
In above code we have set maxRequestLength 50 MB and
execution time out to 600 secs.
.aspx code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>File Uplaod</title>
<script type="text/javascript">
function waitingProgressBar() {
if (document.getElementById('fUpload').value.length
> 0) {
document.getElementById('myUpdtProgress').style.display
= 'block';
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="scriptUpload"
runat="server"></asp:ScriptManager>
<div>
<asp:UpdatePanel ID="updtPanel"
runat="server"
UpdateMode="Conditional">
<Triggers>
<asp:PostBackTrigger ControlID="lnkUpload"
/>
</Triggers>
<ContentTemplate>
<asp:FileUpload ID="fUpload"
runat="server"
/>
<asp:LinkButton ID="lnkUpload"
runat="server"
Text="Upload"
onclick="lnkUpload_Click"
OnClientClick="javascript:waitingProgressBar();" ></asp:LinkButton>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="myUpdtProgress"
runat="server"
AssociatedUpdatePanelID="updtPanel">
<ProgressTemplate>
<img src="ajax-loader.gif"
alt="uploading"
/> uploading..
</ProgressTemplate>
</asp:UpdateProgress>
</div>
<div><asp:Label ID="lblMessage"
runat="server"
Visible="false"></asp:Label></div>
</form>
</body>
</html>
.aspc.cs code:
protected void
lnkUpload_Click(object sender, EventArgs e)
{
try
{
System.Threading.Thread.Sleep(2000);
string fileName = fUpload.FileName;
fUpload.SaveAs(Server.MapPath("~/Upload/"
+ fileName));
lblMessage.Visible = true;
lblMessage.Text = "File uploaded
successfully.";
}
catch (Exception
ex)
{
lblMessage.Visible = true;
lblMessage.Text = "Error while
uploading file " + ex.Message; ;
}
}
Comments