Introduction:
Here I will explain how to show or display loading / progress bar while uploading files using ajax updatepanel in updateprogress in asp.net using c#, vb.net with example. By using ajax postbacktrigger and updateprogress properties in ajax updatepanel in asp.net we can show loading image while upload files using c#, vb.net.
Description:
In previous articles I explained show progressbar during postbacks using updatepanel, ajax updatepanel with triggers example in asp.net, asp.net confirmationbox with yes/no options using modalpopup, ajax modalpopupextender to edit gridview row details, group columns in gridview, gridview examples in asp.net and many articles relating to gridview, asp.net, c#,vb.net and jQuery. Now I will explain how to show progress bar while uploading files using ajax updatepanel updateprogess in asp.net using c#, vb.net.
In previous articles I explained show progressbar during postbacks using updatepanel, ajax updatepanel with triggers example in asp.net, asp.net confirmationbox with yes/no options using modalpopup, ajax modalpopupextender to edit gridview row details, group columns in gridview, gridview examples in asp.net and many articles relating to gridview, asp.net, c#,vb.net and jQuery. Now I will explain how to show progress bar while uploading files using ajax updatepanel updateprogess in asp.net using c#, vb.net.
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"
runat="server">
<title>Show Loading Image
while uploading images using updatepanel</title>
<style type="text/css">
.overlay
{
position: fixed;
z-index: 999;
height: 100%;
width: 100%;
top: 0;
background-color: Black;
filter: alpha(opacity=60);
opacity: 0.6;
-moz-opacity: 0.8;
}
</style>
<script type="text/javascript">
function showProgress() {
var updateProgress = $get("<%=
UpdateProgress.ClientID %>");
updateProgress.style.display = "block";
}
</script>
</head>
<body>
<form id="form1"
runat="server">
<asp:ScriptManager ID="scriptmanager1"
runat="server"></asp:ScriptManager>
<asp:UpdatePanel runat="server"
ID="updatepanel1"
UpdateMode="Conditional">
<ContentTemplate>
<div style="align:center; margin-left:350px; margin-top:200px">
<asp:FileUpload ID="uploadfiles1"
runat="server"
/>
<asp:Button ID="btnUpload"
Text="Upload"
runat="server"
onclick="btnUpload_Click"
OnClientClick="showProgress()"
/><br
/>
<asp:Label ID="lblMsg"
runat="server"/>
</div>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnUpload"
/>
</Triggers>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress"
runat="server"
AssociatedUpdatePanelID="updatepanel1">
<ProgressTemplate>
<div class="overlay">
<div style="
z-index: 1000;
margin-left:
350px;margin-top:200px;opacity: 1;-moz-opacity: 1;">
<img alt=""
src="loading.gif"
/>
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</form>
</body>
</html>
|
After completion of aspx page create new folder uploads in your application
to upload files and add following namespaces in codebehind
C#
Code
using System;
using System.IO;
|
After completion of adding namespaces you need to write the
code like as shown below
protected void Page_Load(object
sender, EventArgs e)
{
}
protected void btnUpload_Click(object
sender, EventArgs e)
{
string fileName = Path.GetFileName(uploadfiles1.FileName);
uploadfiles1.SaveAs(Server.MapPath("~/uploads/")
+ fileName);
lblMsg.Text = "File Uploaded
Successfully";
}
|
VB.NET
Code
Imports System.IO
Partial Class VBCode
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal
sender As Object,
ByVal e As EventArgs)
End Sub
Protected Sub btnUpload_Click(sender As
Object, e As EventArgs)
Dim fileName As String = Path.GetFileName(uploadfiles1.FileName)
uploadfiles1.SaveAs(Server.MapPath("~/uploads/")
& fileName)
lblMsg.Text = "File Uploaded
Successfully"
End Sub
End Class
|
Demo
Download
Sample Code Attached
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
|
|||
2 comments :
Very helpfull code i used code from this website
Thanks for this
Great,
vry nice code for progress bar.successfully run.thnx
Note: Only a member of this blog may post a comment.