Comment intégrer une barre de progression dans un formulaire HTML?

Question

J'ai ce code ci-dessous et je veux qu'il montre la progression d'une soumission de formulaire d'un téléchargement de fichier. Je veux que cela fonctionne sur mon site Web, visitez-le via cette adresse IP (24.148.156.217). Donc, si vous avez vu le site Web, je veux que la barre de progression s'affiche lorsque l'utilisateur remplit les informations, puis appuie sur le bouton de soumission. Ensuite, la barre de progression s'affiche avec le temps jusqu'à ce qu'il soit terminé.

<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

JQuery UI dispose d'une fonction de barre de progression.

This est une barre de progression purement CSS qui fonctionne sur la plupart des navigateurs, y compris IE6.

Answer 2

Si l'utilisation de Flash est acceptable pour vous, vous pouvez essayer SWFUpload.