aspdotnet-suresh offers articles and tutorials,csharp dot net, articles and tutorials,VB.NET Articles,Gridview articles,code examples of 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Show Progress Bar while Uploading Files using AJAX UpdateProgress in ASP.Net

Jun 15, 2015

Here I will explain how to show or display loading / progress bar while uploading files using ajax updatepanel updateprogress in using c#, with example. By using ajax postbacktrigger and updateprogress properties in ajax updatepanel  in we can show loading image while upload files using c#,

In previous articles I explained show progressbar during postbacks using updatepanel, ajax updatepanel with triggers example in, confirmationbox with yes/no options using modalpopup, ajax modalpopupextender to edit gridview row details,
group columns in gridview, gridview examples in and many articles relating to gridview,, c#, and jQuery. Now I will explain how to show progress bar while uploading files using ajax updatepanel updateprogess in using c#,

Now open your aspx page and write the code like as shown below

<html xmlns="">
<head id="Head1" runat="server">
<title>Show Loading Image while uploading images using updatepanel</title>
<style type="text/css">
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;
<script type="text/javascript">
function showProgress() {
var updateProgress = $get("<%= UpdateProgress.ClientID %>"); = "block";
<form id="form1" runat="server">
<asp:ScriptManager ID="scriptmanager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel runat="server" ID="updatepanel1" UpdateMode="Conditional">
<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"/>
<asp:PostBackTrigger ControlID="btnUpload" />
<asp:UpdateProgress ID="UpdateProgress" runat="server" AssociatedUpdatePanelID="updatepanel1">
<div class="overlay">
<div style=" z-index: 1000; margin-left: 350px;margin-top:200px;opacity: 1;-moz-opacity: 1;">
<img alt="" src="loading.gif" />

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";


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


Show Progress Bar when uploading files using AJAX UpdateProgress in ASP.Net
Download Sample Code Attached

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest,, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email


Unknown said...

Thanks its better than any other.

Unknown said...

Thank you soo much, It work

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.