Cum să construiți un program de încărcare de fișiere JavaScript?

Încărcarea fișierelor este o caracteristică de bază a majorității proiectelor web de astăzi. De exemplu, site-urile web moderne și aplicațiile web precum Facebook, LinkedIn, Twitter, Coursera și multe altele permit utilizatorilor finali să încarce fișiere, cum ar fi imagini, documente, videoclipuri etc. În plus, instrumente online precum instrumente de editare a imaginilor, verificatoare de plagiat, iar convertoarele PDF-to-Word permit utilizatorilor să încarce, de asemenea, fișiere. Uneori, echipele interne au nevoie de o funcție de încărcare a fișierelor pentru a încărca videoclipuri și imagini ale produselor. Deși crearea unui instrument de încărcare de fișiere poate fi o provocare, astăzi sunt disponibile mai multe instrumente și biblioteci terță parte care ajută la implementarea rapidă a unei funcții de încărcare a fișierelor în proiectul dvs. Cu toate acestea, dacă doriți să creați un instrument de încărcare de fișiere, mai precis, un instrument de încărcare JavaScript, de la zero, acest articol este locul potrivit.

În acest articol, vă vom arăta cum să creați un instrument de încărcare de fișiere JavaScript cu JavaScript vanilla sau JavaScript pur fără a utiliza biblioteci externe.

Care sunt caracteristicile unui instrument de încărcare de fișiere?

Când vine vorba de construirea unui instrument de încărcare de fișiere, trebuie să creăm un buton de încărcare a fișierelor frontale care le va permite utilizatorilor să încarce fișierele dorite pe site-ul web sau în aplicația web. De asemenea, putem permite încărcarea mai multor fișiere și afișarea barelor de progres pentru o experiență mai bună a utilizatorului. În plus, ar trebui să arătăm și previzualizările imaginii atunci când un utilizator încarcă un fișier imagine. Odată ce fișierul este încărcat, trebuie să-l citim, să-l trimitem la backend și să-l stocăm pe server. Uneori, utilizatorii încarcă fișiere mari, ceea ce duce la încărcare lentă. Din acest motiv, cel mai bine este să încărcați fișiere mari pe server în bucăți pentru a preveni erorile și pentru a îmbunătăți viteza. Aceste bucăți de fișiere sunt mai ușor de gestionat decât un singur fișier mare.

În plus, dezvoltatorii trebuie să creeze un instrument de încărcare de fișiere eficient, care să accepte încărcări rapide. De asemenea, trebuie să vă asigurați că un instrument de încărcare de fișiere este securizat pentru a preveni atacatorii cibernetici să implementeze programe malware și viruși în serverul dvs.

Cum se creează un program de încărcare de fișiere JavaScript?

Pasul 1: Configurarea părții server

Vom folosi pachetul HTTP încorporat pentru a configura serverul Node.js. Vom începe prin a crea un folder nou pentru proiect:

serviciul de încărcare a fișierelor mkdir

În continuare, vom crea un fișier index.js. Acesta va fi punctul de intrare al serverului nostru.

În cele din urmă, vom crea serverul HTTP care va rula pe portul 8080

Pasul 2: Crearea front-end-ului pentru încărcarea fișierelor JavaScript

Pentru a crea partea frontală a programului nostru de încărcare a fișierelor JavaScript, vom crea un fișier HTML de bază care va afișa un buton de încărcare a fișierelor și va accepta introducerea fișierului de la utilizatori. De asemenea, vom afișa starea încărcării fișierului. Odată ce utilizatorul face clic pe butonul, procesul de încărcare a fișierului va fi inițiat.

În timp ce creăm un buton simplu de încărcare a fișierelor, puteți, de asemenea, să editați textul butonului sau să schimbați culoarea butonului în scopuri de design.

În continuare, vom trimite acest fișier din backend:

Pasul 3: Citirea fișierului încărcat pe front-end

Pentru a citi conținutul fișierului de pe front-end, vom folosi obiectul „FileReader”. Permite aplicațiilor web să citească conținutul fișierului (stocat pe sistemul utilizatorului) în mod asincron. Obiectul „FileReader” oferă mai multe metode de a citi un fișier. De exemplu, putem citi fișierul încărcat ca un buffer de matrice sau în date binare brute. Putem citi chiar fișierul ca URL de date. Aici, vom folosi metoda matricei pentru a citi fișierul:

Fișierele selectate pot fi accesate în câmpul „fișiere” pentru introducere:

Obiectul „FileReader” oferă, de asemenea, mai mulți ascultători de evenimente, cum ar fi „onprogress” și „onload”, pentru a urmări citirea fișierului încărcat pe front-end. Aici, vom folosi evenimentul „onload”:

Pasul 4: Trimiterea fișierului încărcat către backend

Înainte de a trimite fișierul încărcat de utilizator la backend, cel mai bine este să îl împărțim în bucăți sau bucăți mici și să trimitem bucățile de fișiere periodic, mai ales dacă dimensiunea fișierului este mare. Acest lucru se datorează faptului că încărcarea fișierelor care sunt foarte mari poate cauza probleme legate de latență și viteză. În plus, uneori atacatorii cibernetici încarcă și fișiere prea mari, ceea ce poate cauza funcționarea defectuoasă a serverului.

Deci, mai întâi vom împărți fișierul în bucăți și le vom trimite la backend unul câte unul. De asemenea, trebuie să ne asigurăm că trimitem bucățile în ordine, astfel încât fișierul să nu fie corupt. Vom folosi, de asemenea, „async await”, astfel încât să nu supraîncărcăm serverul cu solicitări.

Pasul 5: Stocarea bucăților de fișiere pe server

În cele din urmă, vom primi bucățile și le vom stoca pe server.

Asta e. Acum avem un instrument de încărcare complet de fișiere unice pentru încărcările de fișiere Javascript. De asemenea, putem activa mai multe încărcări de fișiere folosind opțiunea „multiple”:

<input type="file” id="files” multiple>

Vom împărți fiecare fișier în bucăți unul câte unul și le vom trimite la backend.

Concluzie

Încărcarea fișierelor este o caracteristică esențială a multor aplicații web și site-uri web moderne. Putem folosi un instrument de încărcare de fișiere terță parte, cum ar fi o bibliotecă JavaScript sau API-ul de încărcare a fișierelor, pentru a implementa rapid un fișier JavaScript încărcat în aplicațiile noastre. Cu toate acestea, puteți crea și un instrument de încărcare de fișiere de la zero așa cum doriți. De exemplu, puteți împărți fișierele mari în bucăți și le puteți trimite către backend unul câte unul. În acest articol, am creat un instrument de încărcare de fișiere JavaScript cu Vanilla JS de la zero.