Jak pracować z plikami w JavaScript za pomocą API FileReader | Wyjaśniono przykładami

API czytnika plików zapewnia czytnik plików object, które można użyć do odczytu plików z komputera lokalnego i używania jego danych na stronie internetowej. Możesz nawet użyć go do odczytania pliku z komputera lokalnego klienta, a następnie przenieść jego dane do serwera.

Czytanie pliku i odczyt jego danych można wykonać na wiele sposobów, ale czasami najlepiej jest używać obiektu \ API obsługiwanego przez prawie wszystkich przeglądarek internetowych. Dlatego API FileReader jest jednym z najczęściej używanych obiektów waniliowych JavaScript do odczytania zawartości pliku.

Obiekt czytnika plików

Aby utworzyć nowy obiekt czytnika plików, musisz najpierw zadzwonić FileReader () konstruktor za pomocą "nowy" Słowo kluczowe. Następnie możesz zacząć używać różnych funkcji tego obiektu. Aby dowiedzieć się więcej o tym konstruktorze, możesz odwiedzić oficjalne dokumenty przez MDN, klikając tutaj.

Metody czytnika plików

Obiekt czytnika plików zawiera wiele różnych metod, które pomagają nam przeanalizować dane pliku, które czytamy. Niektóre metody są wykonywane automatycznie przez przeglądarki i są nazywane metodami obsługi zdarzeń, na przykład „Onload ()” Metoda jest automatycznie wywoływana po zakończeniu czytnika pliku.

Aby uzyskać dostęp do metod obiektu czytnika plików, używasz operator kropki „ .". Niektóre metody i zmienne, do których można uzyskać dostęp za pomocą obiektu czytnika plików, to ::

• obiekt. Wynik: używany do uzyskania zawartości odczytanego pliku
• obiekt.Readastext: odczytuje treść pliku i analizuje je jako tekst
• obiekt.ABORT: Przerywa bieżącą operację odczytu

I wiele więcej, co można odczytać na stronie internetowej ich oficjalnej dokumentacji.

Przykład czytnika plików

Aby zademonstrować użycie interfejsu API czytnika plików, będziemy potrzebować strony internetowej HTML z polem wejściowym type = ”plik”, Możemy to utworzyć za pomocą następującego wiersza w pliku HTML:

To da nam następującą stronę internetową:

Notatka: Nie użyliśmy żadnego atrybutu identyfikatora lub klasy w polu wejściowym, ponieważ będziemy odnosić się do naszego pola wejściowego za pomocą selektora zapytania.

W przypadku kodu JavaScript pierwszą rzeczą, którą zamierzamy zrobić, jest wybranie pola wejściowego za pomocą selektora zapytania:

const wejście = dokument.querySelelect ('input [type = "plik"]');

Następnie dodamy słuchacza wydarzeń "zmiana" na naszej zmiennej wejście, To wywoła funkcję, aby załadować zawartość pliku za pomocą następującego wiersza:

wejście.addEventListener („zmiana”, funkcja (e)
, FAŁSZ);

Ten funkcja słuchacz zdarzeń będzie wykonywać za każdym razem znacznik wejściowy ładuje plik, możemy uzyskać dostęp do pliku za pomocą "wejście.plik" szyk. Aby wyświetlić szczegóły załadowanego pliku, możemy użyć następującego wiersza:

konsola.log (wejście.pliki [0])

Otrzymujemy następujące dane wyjściowe na naszej konsoli:

Wewnątrz funkcji utworzymy nasz obiekt czytnika plików za pomocą wiersza:

const Reader = new FileReader ();

Plik, który chcę odczytać, to plik tekstowy, więc tutaj zamierzam użyć metody Readastext obiektu czytnika plików, aby analizować zawartość plików jako dane tekstowe za pomocą następujących wierszy:

czytelnik.Readastext (wejście.pliki [0]);

Teraz możemy uzyskać dostęp do zawartości pliku, który odczytamy i analizujemy za pomocą czytelnik.wynik. onload () Metoda jest automatycznie wywoływana, gdy obiekt czytnika pliku jest gotowy do czytania pliku, abyśmy mogli wyświetlić zawartość pliku po zakończeniu odczytu za pomocą następujących poleceń:

czytelnik.onload = function ()
konsola.dziennik (czytelnik.wynik);
;

Kompletny fragment kodu to:

const wejście = dokument.querySelelect ('input [type = "plik"]');
wejście.addEventListener
"zmiana",
funkcja (e)
konsola.log (wejście.pliki [0]);
const Reader = new FileReader ();
czytelnik.Readastext (wejście.pliki [0]);
czytelnik.onload = function ()
konsola.dziennik (czytelnik.wynik);
;
,
FAŁSZ
);

Uruchom plik i wybierz plik tekstowy na komputerze lokalnym w ten sposób:

Zaobserwujesz następujący wynik na swojej konsoli:

I proszę bardzo, przeczytałeś zawartość pliku i wydrukowałeś je na konsoli.

Praca z obrazem

Aby odczytać obraz i wyświetlić go na konsoli, musisz najpierw odczytać plik za pomocą ReadasDataurl Korzystanie z następującej linii:

czytelnik.ReadAsDataurl (wejście.pliki [0]);

Aby wyświetlić obraz na swojej stronie internetowej, musisz utworzyć nową zmienną obrazu w środku onload () Funkcja za pomocą następujących wierszy:

czytelnik.onload = function ()
const img = new Image ();
;
,

A potem w tym Onload Funkcja, ustawiasz źródło zmiennej obrazu, którą utworzyliśmy równe wyniku obiektu czytnika plików:

img.src = czytnik.wynik;

I na koniec dołączymy tę zmienną obrazu do dokumentu za pomocą następującego wiersza:

dokument.ciało.appendChild (IMG);

Kompletny fragment kodu to:

const wejście = dokument.querySelelect ('input [type = "plik"]');
wejście.addEventListener
"zmiana",
funkcja (e)
konsola.log (wejście.pliki [0]);
const reader = newFileReader ();
czytelnik.ReadAsDataurl (wejście.pliki [0]);
czytelnik.onload = function ()
constimg = new Image ();
img.src = czytnik.wynik;
dokument.ciało.appendChild (IMG);
;
,
FAŁSZ
);

Po uruchomieniu pliku będziesz mieć następujące dane wyjściowe:

I proszę bardzo, teraz wiesz, jak pracować z interfejsem API czytnika plików, aby odczytać pliki na komputerze lokalnym

Wniosek

API czytnika plików jest wbudowanym interfejsem API z waniliowym JavaScript i jest obsługiwany przez prawie wszystkie przeglądarki internetowe. Ten API czytnika plików zwraca nam obiekt czytnika plików, którego możemy użyć do odczytania zawartości pliku, wybierając metodę parsowania. W tym poście dowiedzieliśmy się o interfejsie API czytnika plików, obiektu czytnika plików i jak korzystać z obiektu czytnika plików do odczytu plików tekstowych, a także plików obrazów. Wyświetlaliśmy nawet obraz w przeglądarce internetowej, dołączając go do dokumentu.