JavaScript fornisce le istruzioni di codice necessari per caricare una barra di avanzamento, il che significa che si crea una barra di avanzamento che indica all'utente lo stato di un file caricato. Se il file è grande, ci vogliono diversi minuti per caricare il file. Fornire una barra di avanzamento, in modo che l'utente sa che il sito funziona correttamente e non ha smesso di caricare il file.

istruzione

1 Aprite il vostro editor preferito Javascript e il vostro sito web del progetto. È inoltre possibile modificare JavaScript utilizzando un editor HTML.

2 Creare lo stile CSS. Lo stile CSS imposta la sezione colorata del bar, quindi ogni incremento aggiunge più colore allo stato di avanzamento della barra. Copiare e incollare il seguente codice CSS per impostare i colori e il layout del bar:

bar p

{

display: block;
width: 300px;
padding: 2px 5px;
margin: 2px 0;
border: 1px inset #446;
border-radius: 5px;

}

3 Aggiungere la funzionalità JavaScript per il processo di caricamento. Il codice seguente carica un file per l'utente e imposta la vista barra di avanzamento:

var XHR = new XMLHttpRequest ();

var o = $id("bar");
var progress = o.appendChild(document.createElement("p"));
progress.appendChild(document.createTextNode("upload filename.html"));

Sostituire "filename.html" con il proprio nome di file.

4 Cambiare il colore della barra di avanzamento per mostrare la percentuale di avanzamento del caricamento del file caricati sul server:

xhr.upload.addEventListener ( "progresso", la funzione (e) {

var pc = parseInt(100 - (e.loaded / e.total * 100));
bar.style.backgroundPosition = pc + "% 0";