Click here to Skip to main content
Click here to Skip to main content

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

Comments and Discussions

GeneralMy vote of 1 Pinmember ProgramFOX2-Feb-13 4:49 
GeneralMy vote of 1 Pinmemberramaluciano5-Jul-10 8:28 
GeneralMy vote of 1 PinmemberLACoder29-Mar-09 2:35 
QuestionDoes this show the real time pending for the upload? PinmemberRajib Ahmed1-Jul-08 19:56 
Generaltimeouts.. PinmemberMember 330132530-Jun-08 11:38 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    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.150327.1 | Last Updated 30 Jun 2008
Article Copyright 2008 by pank9002
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid