✅ HTML5 - Prijenos datoteka

Sadržaj

Kad na jednoj stranici imamo obrasce za prikupljanje podataka HTML5 Osim što možemo uzimati podatke s poljima za unos, možemo učitavati i datoteke, čime možemo ubrzati učitavanje određenih podataka koje je nemoguće izraziti u tekstu ili koji mogu biti vrlo dugi tekstovi, uobičajeno je učitavanje slika datoteke ili pdf datoteke, budući da su ova dva formata vrlo popularna, međutim Ajax možemo učitati gotovo sve vrste datoteka.
Učitajte datoteke
Do učitavanje datoteka pomoću Ajaxa, moramo stvoriti polje vrste datoteke u obliku i u našoj rutini Ajax koristiti objekt FormData pomoću kojih ćemo prikupljati podatke kako bismo im mogli dati potreban format i prenijeti našu datoteku na poslužitelj.
Predmet FormData mora se koristiti s oprezom jer još uvijek mogu postojati inačice preglednika koje ga ne podržavaju u potpunosti, međutim to je prilično čvrsto rješenje.
Pogledajmo u sljedećem kodu kako izvršiti osnovni prijenos datoteka:

 PrimjerBanane:Jabuke:Trešnje:Datoteka:Ukupno:0 stavkiPredajte obrazac

Prilikom uključivanja unosa vrste datoteke, objekt FormData automatski dogovara da se naša datoteka može učitati na poslužitelj, na sljedećoj slici možemo vidjeti kako preglednik to tumači:

U ovom slučaju radilo se o prilično laganoj slici pa se vrijeme učitavanja datoteke na poslužitelj ne primjećuje, međutim, da je riječ o pdf formatu od 30 MB vrijeme bi bilo puno dulje, jer je to transparentno za korisnika, mogao bi pomisliti da je stranica ne radi "ništa" ili je "razmišljao" kako bi to izbjegao, možemo ugraditi traku napretka pomoću koje napredak postaje vidljiv.
Da bismo vidjeli napredak uspona, upotrijebit ćemo objekt XMLHttpRequest za provjeru statusa zahtjeva Ajax:

 PrimjerBanane:Jabuke:Trešnje:Datoteka:Napredak:Ukupno:0 stavkiPredajte obrazac

Definirali smo element napredak i s njim Objekt XMLHttpRequest Vrijednosti možemo dodijeliti dok prijenos napreduje, u pregledniku to možemo vidjeti na sljedeći način:

POVEĆAJTE

Možemo koristiti Ajax Za mnogo više od savjetovanja s elementima na drugim stranicama, možemo ga koristiti i za poboljšanje obrazaca kada je u pitanju prikupljanje podataka.Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod