Jak odczytać lokalny plik tekstowy za pomocą JavaScript?
Wyobraź sobie, że Twoja strona internetowa chce wchodzić w interakcję z plikami na komputerze użytkownika. HTML5 udostępnia przydatne narzędzie o nazwie File API, które to umożliwia. Interfejs API plików umożliwia interakcję z plikami pojedynczymi, wieloma i BLOB.
Interfejs API FileReader może być używany do asynchronicznego odczytu pliku we współpracy z JavaScript Obsługa zdarzeń. Jednak nie wszystkie przeglądarki obsługują HTML 5, dlatego ważne jest przetestowanie kompatybilności przeglądarki przed użyciem interfejsu File API.
Istnieją cztery wbudowane metody w interfejsie API FileReader do odczytywania plików lokalnych:
- FileReader.readAsArrayBuffer(): Odczytuje zawartość określonego pliku wejściowego. Atrybut wyniku zawiera ArrayBuffer reprezentujący dane pliku.
- FileReader.readAsBinaryString(): Odczytuje zawartość określonego pliku wejściowego. Atrybut wyniku zawiera nieprzetworzone dane binarne z pliku w postaci ciągu znaków.
- FileReader.readAsDataURL(): Odczytuje zawartość określonego pliku wejściowego. Atrybut wyniku zawiera adres URL reprezentujący dane pliku.
- FileReader.readAsText(): Odczytuje zawartość określonego pliku wejściowego. Atrybut wyniku zawiera zawartość pliku w postaci ciągu tekstowego. Ta metoda może przyjąć wersję kodowania jako drugi argument (jeśli jest to wymagane). Domyślne kodowanie to UTF-8.
Różne przykłady odczytu lokalnych plików tekstowych przy użyciu JavaScript:
Przykład 1: Aby zademonstrować użycie metody FileReader.readAsText() do odczytu pliku lokalnego.
HTML Przeczytaj tytuł pliku tekstowego> head>
przed>