Akademi JavaScript · Pelajaran

Membaca Fail dengan FileReader

Baca fail terpilih sebagai teks atau URL data.

Pelajaran 2 daripada 413 langkah

Membaca Fail dengan FileReader ialah pelajaran Akademi JavaScript percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Akademi JavaScript, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.

Apakah FileReader?

FileReader ialah antara muka pengaturcaraan aplikasi pelayar yang membaca kandungan objek File dan Blob secara tak segerak. Anda mendapatkan fail daripada <input type="file"> dan membacanya sebagai teks, URL data atau data binari.

Mendapatkan Fail Daripada Masukan

Masukan fail mendedahkan senarai files. Fail pertama yang dipilih berada pada indeks 0, dengan sifat 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 Berlaku Secara Tak Segerak

FileReader tidak mengembalikan data secara langsung. Lampirkan pengendali onload, kemudian panggil kaedah pembacaan. Hasilnya akan tiba kemudian dalam reader.result.

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

readAsText

readAsText menyahkod fail sebagai rentetan teks, sesuai untuk fail .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 amat sesuai untuk mempratonton imej dengan menetapkannya kepada 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 binari mentah sebagai ArrayBuffer, yang berguna untuk menghuraikan format fail bait demi bait.

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

Mengendalikan Ralat

Lampirkan pengendali onerror untuk menangkap kegagalan pembacaan, contohnya apabila fail tidak boleh dibaca.

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

Menjejaki Kemajuan

Bagi fail besar, peristiwa onprogress melaporkan jumlah bait yang telah dimuatkan setakat ini, yang berguna untuk bar 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

Antara muka berasaskan peristiwa ini agak rumit. Bungkusnya dalam Promise supaya anda boleh menggunakan await untuk kod yang lebih kemas.

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 Moden: file.text()

Pelayar moden membolehkan anda memanggil file.text(), file.arrayBuffer() atau file.stream() secara langsung, dengan mengembalikan Promise. Kaedah ini lebih mudah daripada FileReader dalam banyak keadaan.

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

show(file);

Mengapa FileReader Penting

FileReader membolehkan anda memproses fail yang dipilih pengguna sepenuhnya dalam pelayar: mempratonton imej, menghuraikan fail CSV atau mengesahkan muat naik sebelum penghantaran. Pilih kaedah pembacaan berdasarkan data yang diperlukan: teks, URL data atau binari. Seterusnya, anda akan meneroka gumpalan data dan URL objek.

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

Semakan Ringkas

Kaedah FileReader yang manakah memberikan rentetan base64 yang sesuai untuk src pratonton imej?

Jawab dalam pelajaran interaktif

Imbas Kembali: Membaca Fail

Anda telah mempelajari cara membaca kandungan fail:

Dapatkan fail daripada input.files; pembacaan berlaku secara tak segerak melalui onload.
readAsText, readAsDataURL dan readAsArrayBuffer mengembalikan format yang berbeza.
Kendalikan onerror dan onprogress untuk ketahanan yang lebih baik.
file.text() dan file.arrayBuffer() moden ialah alternatif berasaskan Promise.

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 59
Pelajaran: 200

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Membaca Fail dengan FileReader” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Akademi JavaScript, termasuk “Membaca Fail dengan FileReader”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Membaca Fail dengan FileReader”?

Baca fail terpilih sebagai teks atau URL data. Anda berlatih Akademi JavaScript menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Akademi JavaScript?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Akademi JavaScript di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Membaca Fail dengan FileReader” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Akademi JavaScript ini?

Ya. Setiap pelajaran Akademi JavaScript menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Akademi JavaScript