JavaScript Academy · Pelajaran

Membaca File dengan FileReader

Baca file yang dipilih sebagai teks atau URL data.

Pelajaran 2 dari 413 langkah

Membaca File dengan FileReader adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa Itu FileReader?

FileReader adalah API peramban yang membaca isi objek File dan Blob secara asinkron. Anda mendapatkan sebuah berkas dari <input type="file"> dan membacanya menjadi teks, URL data, atau data biner.

Mendapatkan Berkas dari Masukan

Masukan berkas menyediakan daftar files. Berkas pertama yang dipilih berada pada indeks 0, dengan properti berguna seperti name, size, dan type.

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

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

Pembacaan Bersifat Asinkron

FileReader tidak mengembalikan data secara langsung. Pasang penangan onload, lalu panggil metode pembacaan. Hasilnya akan tersedia kemudian di reader.result.

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

readAsText

readAsText mendekode berkas sebagai string teks, ideal untuk berkas .txt, .csv, atau JSON.

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

readAsDataURL

readAsDataURL menghasilkan URL data: base64. Ini sangat cocok untuk menampilkan pratinjau gambar dengan menetapkannya ke 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 memberikan data biner mentah sebagai ArrayBuffer, yang berguna untuk mengurai format berkas byte demi byte.

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);

Menangani Kesalahan

Pasang penangan onerror untuk menangkap kegagalan pembacaan, misalnya ketika berkas tidak dapat dibaca.

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

Melacak Kemajuan

Untuk berkas besar, peristiwa onprogress melaporkan jumlah byte yang telah dimuat sejauh ini, sehingga berguna untuk bilah kemajuan.

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);

Membungkus dalam Promise

API berbasis peristiwa ini terasa merepotkan. Bungkus dalam Promise agar Anda dapat menggunakan await untuk kode yang lebih rapi.

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));

Alternatif Modern: file.text()

Peramban modern memungkinkan Anda memanggil file.text(), file.arrayBuffer(), atau file.stream() secara langsung, yang mengembalikan Promise. Untuk banyak kasus, cara ini lebih sederhana daripada FileReader.

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

show(file);

Mengapa FileReader Penting

FileReader memungkinkan Anda memproses berkas yang dipilih pengguna sepenuhnya di peramban: menampilkan pratinjau gambar, mengurai CSV, atau memvalidasi unggahan sebelum mengirimnya. Pilih metode pembacaan berdasarkan data yang Anda perlukan: teks, URL data, atau data biner. Selanjutnya, Anda akan mempelajari Blob dan URL objek.

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

Pemeriksaan Singkat

Metode FileReader mana yang memberikan string base64 yang sesuai untuk src pratinjau gambar?

Jawab di pelajaran interaktif

Ringkasan: Membaca Berkas

Anda telah mempelajari cara membaca isi berkas:

Dapatkan berkas dari input.files; pembacaan berlangsung secara asinkron melalui onload.
readAsText, readAsDataURL, dan readAsArrayBuffer mengembalikan format yang berbeda.
Tangani onerror dan onprogress agar lebih tangguh.
file.text() dan file.arrayBuffer() modern merupakan alternatif berbasis Promise.

Gratis untuk memulai

Belajar JavaScript dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 59
Pelajaran: 200

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Membaca File dengan FileReader” gratis?

Ya — teks lengkap “Membaca File dengan FileReader” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Membaca File dengan FileReader”?

Baca file yang dipilih sebagai teks atau URL data. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Membaca File dengan FileReader” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke JavaScript Academy