How to embed a progressbar into a HTML form?

Question

I have this code below and want it to show the progress of a form submission of a file upload. I want it to work on my website visit it through this IP (24.148.156.217). So if you saw the website I want the progress bar to be displayed when the user fills in the information and then hits the submit button. Then the progress bar displays with the time until it's finished.

<style>
<!--
.hide { position:absolute; visibility:hidden; }
.show { position:absolute; visibility:visible; }
-->
</style>

<SCRIPT LANGUAGE="JavaScript">

//Progress Bar script- by Todd King (tking@igpp.ucla.edu)
//Modified by JavaScript Kit for NS6, ability to specify duration
//Visit JavaScript Kit (http://javascriptkit.com) for script

var duration=3 // Specify duration of progress bar in seconds
var _progressWidth = 50; // Display width of progress bar.

var _progressBar = "|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||"
var _progressEnd = 5;
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+"px";
  document.progress.top = pageYOffset+(window.innerHeight/2) - 40+"px";
 } else if (document.getElementById) { // Netscape 6+
  document.getElementById("progress").className = 'show';
  document.getElementById("progress").style.left = (window.innerWidth/2)- 100+"px";
  document.getElementById("progress").style.top = pageYOffset+(window.innerHeight/2) - 40+"px";
 }

 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 = dialog.bar;
  } 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.getElementById("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) { //v2.0
  return eval(jsStr)
}

</script>

<SCRIPT LANGUAGE="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  bgcolor=\"#FFFFCC\">");
 document.write("<TR><TD ALIGN=\"center\">");
 document.write("Progress<BR>");
 document.write("<input type=text name=\"bar\" id=\"bar\" 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>


<form name="form1" method="post">
<center>
<input type="button" name="Demo" value="Display progress" onClick="CallJS('Demo()')">
</center>
</form>

<a href="javascript:CallJS('Demo()')">Text link example</a>

Answer 1

Trouble is, JavaScript doesn't know (and can't know, at least in HTML4) the current progress status of the upload. So, you have three possibilities:

• you can have your JS periodically poll the server for information on the progress (eg with Ajax, or in a separate window)
• you can use something other than JS (eg Flash or Java)
• or you can have an animation that doesn't accurately reflect progress (eg a hourglass, dancing dots, or a bar that goes back and forth).