Hvordan laste opp Progress Bar i Javascript

Javascript gir deg kode uttalelser for å laste opp en fremdriftslinje, noe som betyr at du oppretter en fremdriftslinje som forteller brukeren status på en opplastet fil. Hvis filen er stor, tar det noen minutter å laste opp filen. Gi en fremdriftslinje, slik at brukeren vet at nettstedet fungerer og har ikke stoppet å laste opp filen.

Bruksanvisning

1 Åpne din foretrukne Javascript editor og nettstedet ditt prosjekt. Du kan også redigere Java et HTML-redigeringsprogram.

2 Lag CSS stil. CSS-stil setter opp den fargede delen av baren, slik at hver økning legger mer farge på bar fremgang tilstand. Kopier og lim inn følgende CSS-kode for å sette opp barens farger og layout:

bar p

{

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

}

3 Legg Javascript-funksjonalitet til for opplastingen. Følgende kode laster opp en fil for brukeren og setter opp fremdriftslinjen syn:

Var XHR = new XMLHttpRequest ();

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

Erstatt "filename.html" med ditt eget filnavn.

4 Endre fargen på fremdriftslinjen for å vise hvor stor prosentandel av opplastings fremgang som filopplasting til serveren:

xhr.upload.addEventListener ( "fremskritt", funksjon (e) {

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