JavaScript fornisce le istruzioni di codice necessarie per caricare una barra di avanzamento, ovvero che si crea una barra di avanzamento che indica all'utente lo stato di un file caricato. Se il file è grande, richiede alcuni minuti per caricare il file. Fornire una barra di avanzamento, così l'utente conosce il sito sta funzionando correttamente e non ha smesso di caricare il file.

Istruzioni

1

Aprire il vostro editor preferito di JavaScript e il progetto di sito Web. È inoltre possibile modificare JavaScript utilizzando un editor HTML.

2

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

bar p

{

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

}

3

Aggiungere la funzionalità di JavaScript per il processo di caricamento. Il codice seguente consente di caricare un file per l'utente e imposta la visualizzazione barra di progresso:

xhr var = 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

Modificare il colore dell'indicatore per mostrare la percentuale di avanzamento del caricamento come carica il file sul server:

xhr.upload.addEventListener ("progresso", Function () {

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