Click here to Skip to main content
11,935,361 members (59,584 online)
Click here to Skip to main content
Add your own
alternative version


20 bookmarked

Showing progress bar while uploading a file in an ASP.NET application

, 30 Jun 2008 CPOL
Rate this:
Please Sign up or sign in to vote.
Showing a progress bar using a DIV while uploading a file in an ASP.NET application.


This article explains how to show a progress bar, without using any built-in control, while uploading a file to the server in an ASP.NET Web Application.

Using the code

In this code, we have used the JavaScript functions setInterval() and clearTimout() to show the progress bar. This will run the timer which increases the width of the DIV with a Grey background color. For each timer tick, the div width increases, appearing look like a progress bar.

The layout is as follows:

<div id="divUpload" style="display:none">
    <div style="width:300pt;;text-align:center;">Uploading...</div>
    <div style="width:300pt;height:20px; border:solid 1pt gray">
        <div id="divProgress" runat="server" 
             style="width: 1pt; height: 20px; background-color:Gray;display:none">
    <div style="width:300pt;;text-align:center;">
    <asp:Label ID="lblPercentage" runat="server" 

In the above code, 'divProgress' has a Gray background color and shows the progress bar. Its width increases during every timer tick.

The JavaScript code is as follows:

<script language="javascript" type="text/javascript">
var size = 2;
var id= 0;
function ProgressBar() 
         if(document.getElementById('<%=FileUpload1.ClientID %>').value != "")
        document.getElementById("divProgress").style.display = "block";
        document.getElementById("divUpload").style.display = "block";
        id = setInterval("progress()",20);
        return true;
        alert("Select a file to upload");
        return false;

function progress()
    size = size + 1;
    if(size > 299) 
    document.getElementById("divProgress").style.width = size + "pt";
    document.getElementById("<%=lblPercentage.ClientID %>").
       = parseInt(size / 3) + "%";

In the above JavaScript code, you can see two functions which will be called when you click the Upload button and starts the progress bar.

Points of Interest

JavaScript does a very good job on the client-side which gives the web application a live and dynamic status.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer
India India
No Biography provided

You may also be interested in...

Comments and Discussions

GeneralMy vote of 1 Pin
nytmo00018-May-15 0:35
membernytmo00018-May-15 0:35 
GeneralMy vote of 1 Pin
ProgramFOX2-Feb-13 4:49
member ProgramFOX2-Feb-13 4:49 
GeneralMy vote of 1 Pin
ramaluciano5-Jul-10 8:28
memberramaluciano5-Jul-10 8:28 
GeneralMy vote of 1 Pin
LACoder29-Mar-09 2:35
memberLACoder29-Mar-09 2:35 
QuestionDoes this show the real time pending for the upload? Pin
Rajib Ahmed1-Jul-08 19:56
memberRajib Ahmed1-Jul-08 19:56 
Generaltimeouts.. Pin
Member 330132530-Jun-08 11:38
memberMember 330132530-Jun-08 11:38 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.151126.1 | Last Updated 30 Jun 2008
Article Copyright 2008 by pank9002
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid