Copy-first script
UploadProgressController for multipart-formdata
Viser prosenten under opplasting via XMLHttpRequest.
Forutsetninger
Moderne nettleser og et backend-endpoint som svarer med JSON.
UploadProgressController for multipart-formdata
Viser prosenten under opplasting via XMLHttpRequest.
Når bør du bruke scriptet?
Dette scriptet passer når du vil løse én konkret oppgave raskt, men fortsatt holde kvaliteten høy nok til at koden tåler å bli flyttet inn i produksjonsflyt senere.
Hvorfor er dette nyttig i WEBoracle?
WEBoracle kombinerer innhold, adminverktøy og backendflyt. Små, fokuserte scripts gjør det mulig å bygge funksjoner stegvis uten å blande alt inn i samme fil.
Kode
function uploadWithProgress(url, formData, onProgress) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.upload.addEventListener('progress', event => {
if (event.lengthComputable) {
onProgress(Math.round((event.loaded / event.total) * 100));
}
});
xhr.onload = () => resolve(xhr);
xhr.onerror = reject;
xhr.send(formData);
});
}Tilpasning
- Bytt ut hardkodede navn og tabeller før produksjon.
- Legg til logging hvis scriptet kjører i adminnære eller sikkerhetskritiske løp.
- Pakk logikken inn i en tjeneste eller modul når du ser at den blir gjenbrukt.
Klar til bruk
Kodevindu
Koden er optimalisert for rask kopiering og videre tilpasning i eget prosjekt.
function uploadWithProgress(url, formData, onProgress) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.upload.addEventListener('progress', event => {
if (event.lengthComputable) {
onProgress(Math.round((event.loaded / event.total) * 100));
}
});
xhr.onload = () => resolve(xhr);
xhr.onerror = reject;
xhr.send(formData);
});
}