如何将进度条嵌入到HTML表单中？

我有下面的代码，并希望它显示文件上传的表单提交的进度。我希望它能在我的网站上通过这个IP访问它（24.148.156.217）。因此，如果您看到网站，我希望在用户填写信息并点击提交按钮时显示进度条。然后进度条显示时间，直到完成。如何将进度条嵌入到HTML表单中？

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

<SCRIPT LANGUAGE="JavaScript"> 

//Progress Bar script- by Todd King ([email protected]) 
//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>

来源

2010-10-30 Noah R

许多大公司现在使用jQuery ...如果您考虑使用它，那么jQuery UI中已经有一个进度条http://docs.jquery.com/UI/Progressbar – 2010-10-30 23:09:13