JavaScript Academy · Lekcja

Odczytywanie plików za pomocą FileReader

Proszę odczytywać wybrane pliki jako tekst lub adresy URL danych.

Odczytywanie plików za pomocą FileReader to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Czym jest FileReader

FileReader to interfejs API przeglądarki, który asynchronicznie odczytuje zawartość obiektów File i Blob. Plik można pobrać z elementu <input type="file"> i odczytać jako tekst, data URL lub dane binarne.

Pobieranie pliku z pola wejściowego

Pole wyboru pliku udostępnia listę files. Pierwszy wybrany plik znajduje się pod indeksem 0 i ma przydatne właściwości, takie jak name, size i type.

const input = document.querySelector('#picker');
const file = input.files[0];

console.log(file.name);
console.log(file.size);
console.log(file.type);

Odczytywanie jest asynchroniczne

FileReader nie zwraca danych bezpośrednio. Należy przypisać procedurę obsługi onload, a następnie wywołać metodę odczytu. Wynik pojawi się później w reader.result.

const reader = new FileReader();
reader.onload = function () {
  console.log('done reading');
  console.log(reader.result);
};
reader.readAsText(file);

readAsText

readAsText dekoduje plik jako ciąg tekstowy, co sprawdza się w przypadku plików .txt, .csv lub JSON.

const reader = new FileReader();
reader.onload = () => {
  console.log('contents:', reader.result);
};
reader.readAsText(textFile);

readAsDataURL

readAsDataURL tworzy zakodowany w base64 adres URL data:. Jest to idealne rozwiązanie do wyświetlania podglądu obrazu przez przypisanie go do img.src.

const reader = new FileReader();
reader.onload = () => {
  const img = document.querySelector('#preview');
  img.src = reader.result;
  console.log(reader.result.slice(0, 30));
};
reader.readAsDataURL(imageFile);

readAsArrayBuffer

readAsArrayBuffer zwraca surowe dane binarne jako obiekt ArrayBuffer, przydatny podczas analizowania formatów plików bajt po bajcie.

const reader = new FileReader();
reader.onload = () => {
  const bytes = new Uint8Array(reader.result);
  console.log('byte count:', bytes.length);
  console.log('first byte:', bytes[0]);
};
reader.readAsArrayBuffer(binaryFile);

Obsługa błędów

Należy przypisać procedurę obsługi onerror, aby przechwytywać błędy odczytu, na przykład gdy pliku nie można odczytać.

const reader = new FileReader();
reader.onerror = () => {
  console.log('read failed:', reader.error.name);
};
reader.onload = () => console.log('ok');
reader.readAsText(file);

Śledzenie postępu

W przypadku dużych plików zdarzenie onprogress informuje, ile bajtów zostało dotychczas wczytanych, co jest przydatne przy tworzeniu pasków postępu.

const reader = new FileReader();
reader.onprogress = (event) => {
  if (event.lengthComputable) {
    const percent = (event.loaded / event.total) * 100;
    console.log('loaded ' + percent.toFixed(0) + '%');
  }
};
reader.readAsArrayBuffer(bigFile);

Opakowanie w Promise

Interfejs oparty na zdarzeniach jest mało wygodny. Należy opakować go w Promise, aby używać await i uzyskać czytelniejszy kod.

function readText(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(reader.error);
    reader.readAsText(file);
  });
}

readText(file).then(text => console.log(text));

Nowoczesna alternatywa: file.text()

Nowoczesne przeglądarki umożliwiają bezpośrednie wywołanie metod file.text(), file.arrayBuffer() lub file.stream(), które zwracają obiekty Promise. W wielu przypadkach są one prostsze niż FileReader.

async function show(file) {
  const text = await file.text();
  console.log(text);
}

show(file);

Dlaczego FileReader jest ważny

FileReader umożliwia przetwarzanie wybranych przez użytkownika plików bezpośrednio w przeglądarce: wyświetlanie podglądu obrazów, analizowanie plików CSV lub sprawdzanie plików przed ich wysłaniem. Metodę odczytu należy wybrać zgodnie z potrzebnymi danymi: tekstem, data URL lub danymi binarnymi. Następnie poznamy obiekty Blob i adresy URL obiektów.

const reader = new FileReader();
reader.onload = () => console.log('ready to upload');
reader.readAsDataURL(file);

Szybkie sprawdzenie

Która metoda FileReader zwraca ciąg base64 odpowiedni do użycia jako src podglądu obrazu?

Podsumowanie: odczytywanie plików

Dowiedzieli się Państwo, jak odczytywać zawartość plików:

Pliki można pobierać z input.files, a ich odczytywanie odbywa się asynchronicznie za pomocą onload.
Metody readAsText, readAsDataURL i readAsArrayBuffer zwracają dane w różnych formatach.
Dla większej niezawodności należy obsługiwać zdarzenia onerror i onprogress.
Nowoczesne metody file.text() i file.arrayBuffer() stanowią alternatywy oparte na Promise.

Często zadawane pytania

Czy lekcja „Odczytywanie plików za pomocą FileReader” jest bezpłatna?

Tak — pełny tekst „Odczytywanie plików za pomocą FileReader” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Odczytywanie plików za pomocą FileReader”?

Proszę odczytywać wybrane pliki jako tekst lub adresy URL danych. Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?

Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Odczytywanie plików za pomocą FileReader”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?

Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Obiekt FormData
Odczytywanie plików za pomocą FileReader
Bloby i adresy URL obiektów
Przesyłanie plików za pomocą Fetch

← Powrót do JavaScript Academy