Co potrafi API FileList w JavaScript i jak z niego korzystać.
Interfejs API FileList umożliwia pełną kontrolę nad plikiem wybranym przez użytkownika, dzięki czemu można przeprowadzić walidację pliku.
Pokażę Ci niektóre rzeczy, które możesz sprawdzić w pliku za pomocą interfejsu API FileList.
Załóżmy, że mam plik wejściowy poniżej:
Kiedy ponownie załaduję moją stronę HTML i wybiorę kilka obrazów, w ten sposób pobiorę wybrane pliki jako obiekt.
Oto podgląd:
Możesz zobaczyć, że FileList jest obiektem, który ma w sobie inne właściwości.
W obiekcie FileList:
- Możesz pobrać liczbę plików wybranych przez użytkownika za pomocą właściwości
length. - Więcej informacji o wybranym pliku można uzyskać korzystając z indeksu numerycznego
0...(length - 1)
Na powyższym obrazku widać, że długość wynosi 6, co oznacza, że użytkownik wybrał 6 plików. Zatem pliki otrzymają indeks od 0 do (6–1), tj. od 0 do 5.
Jest to przydatne, jeśli chcesz przeglądać każdy z plików wybranych przez użytkownika.
Właściwości obiektu API FileList
Porozmawiajmy teraz więcej o właściwościach zawartych w wybranym pliku.
- ostatnia modyfikacja
timestamp
Jest to data ostatniej modyfikacji pliku podana jako znacznik czasu.
Aby mieć kontrolę nad datą, przekaż znacznik czasu do konstruktora Date.
- data ostatniej modyfikacji
Date
Jest to pełna data ostatniej modyfikacji pliku.
- imię
string
To jest nazwa pliku.
- rozmiar
integer
Jest to rozmiar pliku w bajtach.
- wpisz
string
To jest typ MIME pliku.
Podsumowując, oto obraz przedstawiający właściwości interfejsu API FileList:
Pętla poprzez pliki
Teraz nauczmy się, jak możemy przeglądać każdy z plików wybranych przez użytkownika i przeprowadzać na nich walidację.
FileList Api udostępnia dane jako obiekt, dlatego musimy napisać pętlę, która przejdzie przez ten obiekt i pobierze potrzebne dane.
Jeśli nie sprawdziłeś mojego poprzedniego artykułu o tym, jak przeglądać obiekt w JavaScript, tutaj jest link do artykułu.
Kiedy wykonasz powyższy kod, zobaczysz, że możemy przejść przez obiekt w pętli i wyprowadzić każdy z plików.
Teraz jesteśmy gotowi do sprawdzenia poprawności plików.
Walidacja
Weryfikacja rozmiaru
Przypomnijmy, że rozmiar konkretnego pliku jest zwracany jako bytes.
Zakładając, że użytkownik może wybierać pliki o rozmiarze nie większym niż 2 MB, przeprowadzę weryfikację w ten sposób.
- Konwertuj 2MB na bajty.
- Przeglądaj pliki w pętli i zapisuj ich rozmiary.
- Sprawdź, czy całkowity rozmiar jest większy niż 2MB.
Wpisz Walidację
Zakładając, że użytkownik może wybierać tylko pliki obrazów, w ten sposób przeprowadzę weryfikację.
- Utwórz tablicę, która będzie przechowywać typy plików obrazów.
- Przejrzyj pliki w pętli i sprawdź, czy któryś z nich nie pasuje do wymaganego typu.
Oto, co się stanie, gdy wybiorę pliki, które nie są obsługiwane.
Sprawdzanie rozszerzeń plików
Do mojej ostatniej weryfikacji chcę, aby użytkownik dostarczył pliki z rozszerzeniem „.png, .jpg, .jpeg”, a każdy plik, który nie pasuje do rozszerzenia, zostanie oznaczony jako nieobsługiwany typ pliku.
Aby przeprowadzić tę weryfikację, wykonam następujące czynności:
- Zapisz wymagane rozszerzenia plików w tablicy.
- Przejrzyj pliki w pętli i przywołaj ich nazwy.
- Wyodrębnij rozszerzenie pliku z nazwy, a następnie porównaj je z wymaganymi rozszerzeniami plików.
Oto, co się stanie, gdy wybiorę pliki, które nie są obsługiwane:
Mam nadzieję, że dzięki temu małemu ćwiczeniu, które tutaj wykonaliśmy, będziesz w stanie w pełni zrozumieć możliwości interfejsu API FileList w JavaScript, w tym jak go używać.
Bardzo chciałbym mieć Twój wkład w ten artykuł.
Dodatkowy
Zbudowałem i uruchomiłem bibliotekę JavaScript w NPM, która umożliwia sprawdzanie poprawności formularzy front-end przy użyciu wyrażeń regularnych, reguł sprawdzania poprawności i atrybutów wejściowych formularzy.
Za pomocą tej biblioteki można sprawdzać poprawność wszystkich typów danych wejściowych w formularzach, w tym sprawdzanie poprawności plików i sprawdzanie poprawności długości.
- Sprawdź tę bibliotekę na NPM:
- Sprawdź tę bibliotekę na GitHubie:
- Sprawdź dokumentację:
Dziękuję.
Więcej treści na PlainEnglish.io. Zapisz się na nasz „bezpłatny cotygodniowy biuletyn”. Śledź nas na Twitterze i LinkedIn. Sprawdź nasz Discord społeczności i dołącz do naszego Kolektywu talentów.
