Click here to Skip to main content
11,706,323 members (60,655 online)
Click here to Skip to main content

File Upload Progress bar without Using AJAX

, 8 Aug 2007 93.1K 3K 56
Rate this:
Please Sign up or sign in to vote.
This article shows how to implement the simple JS progressbar in asp.net application.
Screenshot - Progressbar1.jpg

Introduction

In one of my project there is a requirement in which I have to show a progress bar during the file upload. Its easily possible using Update Panel if we are using AJAX. But my application is not AJAX enabled. So I have to create a simple JavaScript progress bar. I have searched on internet and found some helpful java scripts. I collected the needed code and started it. And finally I made a good simple and easy to implement Progress bar. Here I have used a simple Form which can be shown when your server side process of file upload is going on. Here in this example I also have shown different kinds of validations which can be useful while uploading files. E.g. file size, file type, file already exists in designation folder etc.

Using the code

Follow the steps to implement the simple progress bar into your application.

1. Add following block of code into your Head section of your aspx page:

<head runat="server">
    <title>Simple Progress bar</title> 
    <style>
<!-- 
.hide { position:absolute; visibility:hidden; }
.show { position:absolute; visibility:visible; }
-->
</style>
</head>

Remember to set the Language of your code snippet using the Language dropdown.

2. Then add following Script into your aspx page on top of the page.

<script script language="javascript" type="text/javascript">    
    var duration=2 // Specify duration of progress bar in seconds
    var _progressWidth = 100;    // Display width of progress bar
    var _progressBar = new String("»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»");
    var _progressEnd = 10;
    var _progressAt = 0;

    // Create and display the progress dialog.
    // end: The number of steps to completion
    function ProgressCreate(end) {
        // Initialize state variables
        _progressEnd = end;
        _progressAt = 0;

        // Move layer to center of window to show
        if (document.all) {    // Internet Explorer
            progress.className = 'show';           
            progress.style.left = (document.body.clientWidth/2) - (progress.offsetWidth/2);
            progress.style.top = document.body.scrollTop+(document.body.clientHeight/2) - (progress.offsetHeight/2);            
        } else if (document.layers) {    // Netscape
            document.progress.visibility = true;
            document.progress.left = (window.innerWidth/2) - 100;
            document.progress.top = pageYOffset+(window.innerHeight/2) - 40;
        } else if (document.getElementById) {    // Netscape 6+
            document.getElementById("progress").className = 'show';
            var l = (window.innerWidth/2) - 100;
            var t = pageYOffset + (window.innerHeight/2) - 40;
            document.getElementById("progress").style.left = l + "px";
            document.getElementById("progress").style.top = t + "px";
//            document.getElementById("progress").style.left = (window.innerWidth/2) - 100;
//            document.getElementById("progress").style.top = pageYOffset+(window.innerHeight/2) - 40;
//          Above 2 lines modified by Nilesh Thakkar on 23-July-2007
        }

        ProgressUpdate();    // Initialize bar
    }

    // Hide the progress layer
    function ProgressDestroy() {
        // Move off screen to hide
        if (document.all) {    // Internet Explorer
            progress.className = 'hide';
        } else if (document.layers) {    // Netscape
            document.progress.visibility = false;
        } else if (document.getElementById) {    // Netscape 6+
            document.getElementById("progress").className = 'hide';
        }
    }

    // Increment the progress dialog one step
    function ProgressStepIt() {
        _progressAt++;
        if(_progressAt > _progressEnd) _progressAt = _progressAt % _progressEnd;
        ProgressUpdate();
    }

    // Update the progress dialog with the current state
    function ProgressUpdate() {
        var n = (_progressWidth / _progressEnd) * _progressAt;
        if (document.all) {    // Internet Explorer
            var bar = document.all["dialog"].document.getElementById("bar");
            //var bar = dialog.bar;
            //Above line is modified by Nilesh on 23-July-2007
         } else if (document.layers) {    // Netscape         
            var bar = document.layers["progress"].document.forms["dialog"].bar;
            n = n * 0.55;    // characters are larger
        } else if (document.getElementById){        
                    var bar=document.dialog.bar
            }
        var temp = _progressBar.substring(0, n);
        bar.value = temp;
    }

    // Demonstrate a use of the progress dialog.
    function Demo() {
        ProgressCreate(10);
        window.setTimeout("Click()", 100);
    }

    function Click() {
        if(_progressAt >= _progressEnd) {
            ProgressDestroy();
            return;
        }
        ProgressStepIt();
        window.setTimeout("Click()", (duration-1)*1000/10);
    }

    function CallJS(jsStr) { 
      return eval(jsStr);
      //return true;
    }
</script>

3. Then add below script block at bottom of your aspx page.
First i tried to keep below script block with above script block on top of the page, but it was not working properly, so i tried to put it bottom of the page before Forms tag over and it works. I don't know the reason why it is so, if anybody came to know please update me.

<script language="JavaScript" type="text/javascript">

// Create layer for progress dialog
document.write("<span id=\"progress\" class=\"hide\">");
document.write("<FORM name=\"dialog\" id=\"dialog\">");
document.write("<TABLE border=2 style=\"background-color:Navy;\" >");
document.write("<TR><TD ALIGN=\"center\" style=\"FONT-FAMILY:trebuchet ms; PADDING:0px; FONT-WEIGHT:bold; COLOR:white;\">");
document.write("Please wait<BR>");
document.write("<input type=label name=\"bar\" value=\"Please Wait.........\" size=\"" + _progressWidth/2 + "\"");
if(document.all || document.getElementById)  // Microsoft, NS6
  document.write(" bar.style=\"color:navy;\">");
else // Netscape
  document.write(">");
document.write("</TD></TR>");
document.write("</TABLE>");
document.write("</FORM>");
document.write("</span>");
ProgressDestroy(); // Hides 

</script>

4. Now you script section is over. Now add file upload control into your page where required and also add Upload button as below.

<asp:FileUpload ID="FileUpload1" runat="server"/>
<asp:Button ID="btnUpload" runat="server" Text="Upload File" OnClick="btnUpload_Click" OnClientClick="return CallJS('Demo()');" />

5. Now your aspx page side work is over. You can write server side code to upload and save your file at appropriate place. you can download the code and implement the same.

Your guidance & suggestions are always welcome.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Nilesh Thakkar
Team Leader Cygnet Infotech Pvt Ltd
India India
No Biography provided

You may also be interested in...

Comments and Discussions

 
Questionvalue of progress bar is not showing in label. Pin
Yadvinder Kumar23-Dec-13 19:15
groupYadvinder Kumar23-Dec-13 19:15 
Questionerror on bar.value = temp; Pin
sohrab22-May-12 8:56
membersohrab22-May-12 8:56 
Generalprogressbar Pin
Member 87853323-Apr-12 20:33
memberMember 87853323-Apr-12 20:33 
Suggestionsmall modification in ur code Pin
shreekanth Gaanji17-Sep-11 1:15
membershreekanth Gaanji17-Sep-11 1:15 
GeneralGot Error Pin
Member 444970415-Jul-09 2:00
memberMember 444970415-Jul-09 2:00 
Generalty, but... Pin
die_sinister19-Oct-08 17:01
memberdie_sinister19-Oct-08 17:01 
GeneralRe: ty, but... Pin
Nilesh Thakkar19-Oct-08 17:54
memberNilesh Thakkar19-Oct-08 17:54 
GeneralRe: ty, but... Pin
die_sinister20-Oct-08 14:37
memberdie_sinister20-Oct-08 14:37 
GeneralThanks Pin
irfunme17-Jun-08 5:12
memberirfunme17-Jun-08 5:12 
GeneralGood One Pin
tkjbbs26-May-08 4:41
membertkjbbs26-May-08 4:41 
GeneralNeatUpload does not require AJAX Pin
Dean Brettle7-Dec-07 18:25
memberDean Brettle7-Dec-07 18:25 
GeneralAdding Image.. Pin
deltafloppy24-Aug-07 16:51
memberdeltafloppy24-Aug-07 16:51 
GeneralI don't think that it's a Progress Bar Pin
Dileep.M8-Aug-07 4:24
memberDileep.M8-Aug-07 4:24 
GeneralRe: I don't think that it's a Progress Bar Pin
aprenot8-Aug-07 5:11
memberaprenot8-Aug-07 5:11 
GeneralRe: I don't think that it's a Progress Bar Pin
nguyenthanhtungtinbk8-Aug-07 11:26
membernguyenthanhtungtinbk8-Aug-07 11:26 
GeneralRe: Thanks for a great effort Pin
Nilesh Thakkar8-Aug-07 18:21
memberNilesh Thakkar8-Aug-07 18:21 
GeneralRe: I don't think that it's a Progress Bar Pin
randompete18-Jul-08 0:03
memberrandompete18-Jul-08 0:03 

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
Web01 | 2.8.150819.1 | Last Updated 8 Aug 2007
Article Copyright 2007 by Nilesh Thakkar
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid