Click here to Skip to main content
11,502,547 members (65,037 online)
Click here to Skip to main content

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

, 30 Jun 2008 CPOL 27.6K 1.5K 19
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.

Introduction

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>
    </div>
    <div style="width:300pt;;text-align:center;">
    <asp:Label ID="lblPercentage" runat="server" 
            Text="Label"></asp:Label></div>
</div>

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;
    }
    else
    {
        alert("Select a file to upload");
        return false;
    } 
}

function progress()
{
    size = size + 1;
    if(size > 299) 
    {
        clearTimeout(id);
    }
    document.getElementById("divProgress").style.width = size + "pt";
    document.getElementById("<%=lblPercentage.ClientID %>").
                firstChild.data = parseInt(size / 3) + "%";
}
 
</script>

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.

License

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

Share

About the Author

pank9002
Software Developer
India India
No Biography provided

Comments and Discussions

 
GeneralMy vote of 1 Pin
nytmo00017-May-15 23:35
membernytmo00017-May-15 23:35 
GeneralMy vote of 1 Pin
ProgramFOX2-Feb-13 3:49
member ProgramFOX2-Feb-13 3:49 
GeneralMy vote of 1 Pin
ramaluciano5-Jul-10 7:28
memberramaluciano5-Jul-10 7:28 
GeneralMy vote of 1 Pin
LACoder29-Mar-09 1:35
memberLACoder29-Mar-09 1:35 
QuestionDoes this show the real time pending for the upload? Pin
Rajib Ahmed1-Jul-08 18:56
memberRajib Ahmed1-Jul-08 18:56 
Generaltimeouts.. Pin
Member 330132530-Jun-08 10:38
memberMember 330132530-Jun-08 10: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
Web04 | 2.8.150520.1 | Last Updated 30 Jun 2008
Article Copyright 2008 by pank9002
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid