Validarea fișierelor folosind API-ul FileList în JavaScript

De ce este capabil API-ul FileList din JavaScript și cum să îl folosească.

API-ul FileList vă permite să aveți control deplin asupra fișierului selectat de utilizator și, prin aceasta, puteți efectua validarea fișierului.

Vă voi arăta câteva dintre lucrurile pe care le puteți valida într-un fișier folosind API-ul FileList.

Să presupunem că am o intrare de fișier mai jos:

Când îmi reîncarc pagina HTML și selectez câteva imagini, așa voi recupera fișierele selectate ca obiect.

Iată previzualizarea:

Puteți vedea că FileList este un obiect care are alte proprietăți în interior.

În obiectul FileList:

• Puteți prelua numărul de fișiere selectate de utilizator prin proprietatea length.
• Puteți obține mai multe informații despre fișierul selectat folosind indexul numeric 0...(length - 1)

Din imaginea de mai sus, puteți vedea că lungimea este de 6 și asta înseamnă că utilizatorul a selectat 6 fișiere. Prin urmare, fișierele vor avea un index de la 0 la (6–1), adică de la 0 la 5.

Acest lucru este util dacă doriți să parcurgeți fiecare dintre fișierele selectate de un utilizator.

Proprietăți obiect API FileList

Acum haideți să vorbim mai multe despre proprietățile conținute într-un fișier selectat.

• ultima modificare timestamp

Aceasta este data ultimei modificări a fișierului furnizată ca marcaj temporal.

Pentru a avea control asupra datei, trimiteți marca temporală la constructorul Date.

• LastModifiedDate Date

Aceasta este data completă la care fișierul a fost modificat ultima dată.

• nume string

Acesta este numele fișierului.

• marimea integer

Aceasta este dimensiunea fișierului în octeți.

• tip string

Acesta este tipul MIME al fișierului.

Pentru a recapitula, iată o imagine care arată proprietățile unui API FileList:

Buclă prin fișiere

Acum, să învățăm cum putem parcurge fiecare dintre fișierele selectate de utilizator și să efectuăm validări pe ele.

FileList Api furnizează date ca obiect, așa că trebuie să scriem o buclă care să treacă prin acest obiect și să recuperăm datele de care avem nevoie.

Dacă nu ați verificat articolul meu anterior despre cum să parcurgeți un obiect în JavaScript, „aici este un link către articol”.

Când executați codul de mai sus, veți vedea că putem parcurge obiectul și scoatem fiecare dintre fișiere.

Acum suntem gata să validăm fișierele.

Validare

Validarea mărimii

Amintiți-vă că dimensiunea unui anumit fișier este returnată ca bytes.

Presupunând că utilizatorului i se permite să selecteze fișiere care nu au mai mult de 2 MB, așa voi efectua validarea.

• Convertiți 2MB în octeți.
• Căutați în buclă fișierele și salvați dimensiunile acestora.
• Verificați dacă dimensiunea totală este mai mare de 2 MB.

Validare tip

Acum, presupunând că utilizatorului i se permite să selecteze numai fișiere imagine, așa îmi voi efectua validările.

• Creați o matrice care va stoca tipurile de fișiere imagine.
• Parcurgeți fișierele și verificați dacă vreun fișier nu se potrivește cu tipul necesar.

Iată ce se întâmplă când selectez unele fișiere care nu sunt acceptate.

Validarea extensiilor de fișiere

Pentru ultima mea validare, vreau ca utilizatorul să furnizeze fișiere care au extensia „.png, .jpg, .jpeg”, iar orice fișier care nu se potrivește cu extensia va fi semnalat ca tip de fișier neacceptat.

Pentru a efectua această validare, voi:

• Stocați extensiile de fișiere necesare într-o matrice.
• Parcurgeți fișierele și obțineți numele acestora.
• Extrageți extensia de fișier din nume și apoi comparați-o cu extensiile de fișiere necesare.

Iată ce se întâmplă când selectez fișiere care nu sunt acceptate:

Sper că, cu micul exercițiu pe care l-am făcut aici, puteți înțelege pe deplin de ce este capabil API-ul FileList în JavaScript, inclusiv cum să îl utilizați.

Mi-ar plăcea să am contribuțiile tale la acest articol.

Suplimentar

Am construit și lansat o bibliotecă JavaScript pe NPM care este capabilă să valideze formularele dvs. front-end folosind expresii regulate, reguli de validare și atribute de introducere a formularelor.

Cu această bibliotecă, puteți valida toate tipurile de intrări de formular, inclusiv validarea fișierelor și validarea lungimii.

• Consultați această bibliotecă pe NPM:

• Consultați această bibliotecă pe GitHub:

• Consultați documentația:

Mulțumesc.

Mai mult conținut la PlainEnglish.io. Înscrieți-vă pentru buletinul informativ săptămânal gratuit. Urmărește-ne pe Twitterși LinkedIn. Consultați „Community Discord” și ​​alăturați-vă „Talent Collective”.