CodeProject: File Upload Progress bar without Using AJAX. Free source code and programming help

Announcements

	Windows 7 Comp Win a laptop!
	Monthly Competition

Articles

Desktop Development

Web Development

Enterprise Systems

Content Management Server

Microsoft BizTalk Server

SQL Reporting Services

Platforms, Frameworks & Libraries

Windows Communication Foundation

Windows Presentation Foundation

Windows Workflow Foundation

Cryptography & Security

Threads, Processes & IPC

WinHelp / HTMLHelp

Uncategorised Quick Answers

Graphics / Design

Expression

Usability

Development Lifecycle

Debug Tips

Design and Architecture

Uncategorised Technical Blogs

Services

Code-signing Certificates

Job Board

CodeProject VS2008 Addin

Feature Zones

Product Showcase

Code Signing Resources

WhitePapers / Webcasts

ASP.NET Web Hosting

Advanced Search
Add to IE Search

Discuss

Report

11 votes for this article.

Popularity: 2.36 Rating: 2.27 out of 5

Download SampleProgressBar.zip - 26.7 KB

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

About the Author

Nilesh Thakkar

Member

Occupation:	Web Developer
Location:	India

Other popular ASP.NET articles:

Multiple File Upload With Progress Bar Using Flash and ASP.NET
How to use Flash to upload multiple files in a medium-trust hosting environment
CAPTCHA Image
Using CAPTCHA images to prevent automated form submission.
Exploring Session in ASP.Net
This article describe about session in ASP.Net 2.0 . Different Types of Session , There Configuration . Also describe Session on Web Farm , Load balancer , web garden etc.
10 ASP.NET Performance and Scalability Secrets
10 easy ways to make ASP.NET and AJAX websites faster, more scalable and support more traffic at lower cost
Paging of Large Resultsets in ASP.NET
An article about optimization and performance testing of MS SQL Server 2000 stored procedures used for paging of large resultsets in ASP.NET