Jak czytać pliki lokalne w JavaScript

JavaScript to język programowania na wysokim poziomie, który daje stronom internetowym możliwość myślenia i działania. JavaScript oferuje programistom interaktywność z plikami obecnymi w lokalnym systemie programisty. Interaktywność z plikami może być różnych typów, na przykład przesłanie pliku do serwera lub przesłanie go z ograniczeniami.

Istnieje wiele sposobów otwierania i czytania plików lokalnych w JavaScript, z których najczęstsze jest przy użyciu wbudowanego systemu API systemu/obietnic/ -„FS” API lub za pomocą atrybutu pliku HTML Wybierz

Tag, a nawet za pomocą jakiegoś zewnętrznego pakietu, a następnie wypróbowanie jego metody.

Tak więc w tym poście pokażemy, jak czytać pliki lokalne w JavaScript za pomocą FS API i za pomocą

Atrybut pliku HTML Wybierz.

HTML5 FileReader API

HTML5 wprowadził spójny mechanizm radzenia sobie z plikami lokalnymi poprzez wprowadzenie API czytnika plików specyfikacja. API czytnika plików Można użyć podglądu miniatury zdjęć, gdy są one przesyłane na serwer, a także umożliwić aplikacji internetowej przechowywania referencji pliku, nawet jeśli użytkownik nie jest podłączony do Internetu. Korzystając z obsługi zdarzeń JavaScript i interfejsu API czytnika plików, możemy asynchronicznie odczytać plik.

Czytnik plików API oferuje nam cztery wbudowane metody, których możemy użyć do odczytu plików asynchronicznych. Pierwszą wbudowaną metodą jest FileReader.ReadasarrayBuffer () który odczytuje treść pliku lokalnego, ale zwraca tablicę, która ma zawartość pliku. Potem przychodzi FileReader.ReadasDataurl () który zwraca adres URL danych z pliku lokalnego.

FileReader.ReadasBinaryString () Zwraca zawartość pliku lokalnego w formacie ciągu, a najczęściej używaną wbudowaną metodą FileReader jest FileReader.ReadASText () który zwraca zawartość pliku lokalnego w formacie ciągów tekstowych lub możemy powiedzieć w formie czytelnej człowieka.

Teraz, gdy wiemy, czym jest API FileReader, ustawmy środowisko HTML, aby użytkownik wybierze plik, który chce przeczytać przeglądarkę.

HTML Wybierz plik

HTML to hipertekstowy język znaczników, który służy do nadania struktury naszym stronom internetowym. Użyjemy HTML, aby użytkownik wybrał plik, a następnie użyjemy JavaScript do odczytania treści pliku. Kod HTML podano poniżej:

W powyższym kodzie zainicjowaliśmy wejście tag za pomocą rodzaju plik i biorąc pod uwagę atrybut ID które zostaną użyte do odniesienia tego elementu w naszym pliku JavaScript. Następnie zainicjowaliśmy P tag, w którym nasza zawartość pliku zostanie opublikowana, gdy użytkownik wybierze plik. W końcu używamy scenariusz z atrybutem SRC, w którym odnieśliśmy się do pliku kod.JS które będą zawierać nasz kod JavaScript.

JavaScript Read File Funkcjonalność

Skończyliśmy z HTML, więc teraz przejdźmy do JavaScript, aby osiągnąć nasz cel czytania pliku w JavaScript. W tym celu użyjemy wbudowanej metody API czytnika plików ReadASText (). Kod JavaScript podano poniżej:

var myfile = dokument.getElementById („myfile”);
var fileOutput = Dokument.getElementById („Fileoutput”);
mój plik.addEventListener („zmiana”, function ()
var fileReader = new FileReader ();
FileReader.onload = function ()
Fileoutput.TextContent = FileReader.wynik;

FileReader.Readastext (to.pliki [0]);
)

W powyższym kodzie najpierw otrzymujemy odniesienie pliku wejściowego i P tag ustawiamy w HTML za pomocą ich atrybutu identyfikatora. Następnie dodaliśmy słuchacz zdarzeń zmiany, aby za każdym razem, gdy użytkownik wybierze plik lub wybierze plik, funkcja obecna w tym zdarzeniu zacznie wykonywać.

Wewnątrz funkcji obsługi zdarzeń najpierw zainicjowaliśmy FileReader () obiekt z nowym słowem kluczowym. Następnie po zakończeniu FileReader funkcja po prostu publikujemy wynik odczytu pliku w zmiennej plikuutput, która rzeczywiście jest P etykietka.

Ostatecznie czytamy plik za pomocą wbudowanej metody FileReader ReadASText () i przekazanie argumentu o czytaniu pliku, który jest w pierwszym indeksie. Robimy to, aby użytkownik nie wybrał wielu plików, a nawet jeśli wybrał wiele plików, FileReader po prostu odczytał pierwszy plik wśród nich.

Wybierzmy teraz plik. W tym celu stworzyłem tekst Dokumentuj i napisał dwa wiersze w tym pliku. Wyjście zawartości pliku podano poniżej:

Wybierzmy teraz ten plik z HTML i sprawdź, czy możemy zobaczyć zawartość pliku, czy nie:

Z powodzeniem wybraliśmy plik i przeczytaliśmy jego treść, a następnie wydrukowaliśmy tę treść.

Wniosek

HTML5 zapewnia interfejs API FileReader, za pośrednictwem którego możemy odczytać zawartość plików. API FileReader podaje nam cztery zbudowane metody, których możemy użyć do odczytania pliku tak, jak chcemy. ReadAsarrayBuffer () odczytuje plik i zwraca tablicę zawartości pliku, ReadAsDataurl () odczytuje plik i zwraca adres URL zawartości pliku odczytu, ReadAsBinaryString () Odczyt plik i zwraca surowe dane binarne pliku odczytu i Ostatni jest ReadASText () który odczytuje plik i zwraca zawartość pliku odczytu jako ciąg tekstowy, który jest w formie czytelnej człowieka.

W tym poście omówiliśmy sposób odczytania pliku lokalnego w JavaScript, najpierw wdrażając sposób wyboru lokalnego pliku za pomocą HTML, a następnie po wyborze tego pliku odczytujemy zawartość pliku za pomocą JavaScript.