Urmărirea procesului de Încărcarea a fișierului
Când încărcați fișiere mari prin File API, poate fi util să informați utilizatorii despre progresul operațiunii de citire. În acest scop, tipul FileReader permite tratarea evenimentului progress. La handler-ul acestui eveniment se transmite un obiect care are tipul ProgressEvent și care oferă următoarele proprietăți:
- lengthComputable: o proprietate booleană care indică dacă progresul (cantitatea de octeți citiți) poate fi calculat sau nu
- loaded: un număr întreg de 64 de biți fără semn, care indică volumul de date deja încărcat
- total: un număr întreg de 64 de biți fără semn, care stochează cantitatea totală de date care urmează să fie încărcate
De exemplu, luați în considerare următoarea pagină:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FDC.COM</title>
<style>
#progress {width:0; height:100%; background-color:#ccc;}
#progress-bar {width:100px; height:20px; border:1px solid #888;}
</style>
</head>
<body>
<input type="file" id="files" multiple /><br><br>
<div id="progress-bar">
<div id="progress"></div>
</div>
<script>
const progressbar = document.getElementById("progress-bar");
const progress = document.getElementById("progress");
// urmărim progresul încărcării
function updateProgress(e) {
if (e.lengthComputable) {
const percentLoaded = Math.round((e.loaded / e.total) * 100);
if (percentLoaded < 100) {
progress.style.width = percentLoaded + "%";
progress.textContent = percentLoaded + "%";
}
}
}
// gestionăm selectarea fișierelor
function handleFileSelected(event) {
progress.style.width = "0%";
progress.textContent = "0%";
const reader = new FileReader();
reader.onprogress = updateProgress;
reader.onerror = (e) => console.error(e.target.error);
reader.onload = () => {
progress.style.width = "100%";
progress.textContent = "100%";
};
if(event.target.files.length>0) reader.readAsBinaryString(event.target.files[0]);
}
document.getElementById("files").addEventListener("change", handleFileSelected);
</script>
</body>
</html>Pe pagina este definit elementul input pentru alegerea fisierului. Pentru a indica incarcarea fisierului, pe pagina este definit elementul div id="progress-bar" cu un element imbricat div id="percent".
Ca handler pentru evenimentul change al acestui element input este utilizata functia handleFileSelected. In aceasta, setam valorile initiale pentru indicatorul de incarcare:
progress.style.width = "0%";
progress.textContent = "0%";Apoi, cream un obiect FileReader si pentru evenimentul sau progress ca handler aplicam functia updateProgress. In aceasta functie, calculam starea curenta a incarcarii si actualizam corespunzator latimea si textul elementului progress.
function updateProgress(e) {
if (e.lengthComputable) {
const percentLoaded = Math.round((e.loaded / e.total) * 100);
if (percentLoaded < 100) {
progress.style.width = percentLoaded + "%";
progress.textContent = percentLoaded + "%";
}
}
}Deoarece pentru elementul progress se utilizeaza o culoare de fundal gri, cresterea latimii va duce la marirea zonei colorate, ceea ce va fi un indicator al incarcarii. Mai mult, prin textul elementului vom putea vedea procentul de date al fisierului incarcat.
Cand incarcarea este completa, la obiectul FileReader se declanseaza evenimentul load, unde setam valorile finale pentru elementul progress.
reader.onload = () => {
progress.style.width = "100%";
progress.textContent = "100%";
};La sfarsitul handler-ului de selectie a fisierului, incepem incarcarea acestuia ca un set de octeti:
if(event.target.files.length>0) reader.readAsBinaryString(event.target.files[0]);Pentru a demonstra procesarea progresului incarcarii aici nu sunt utilizate datele incarcate, dar, desigur, putem obtine aceste date, asa cum a fost descris in articolul anterior, si le putem folosi in vreun fel.
Astfel, la alegerea unui fisier, va incepe incarcarea, iar elementul progress va afisa indicatia de incarcare.
