File Upload Progress bar without Using AJAX






2.20/5 (11 votes)
Aug 8, 2007
2 min read

122365

3187
This article shows how to implement the simple JS progressbar in asp.net application.

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
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.