HTML 5 menyediakan cara standar untuk berinteraksi dengan file lokal dengan bantuan File API. File API memungkinkan interaksi dengan file tunggal, ganda, dan BLOB. FileReader API dapat digunakan untuk membaca file secara asinkron bekerja sama dengan penanganan event JavaScript. Namun, semua browser tidak memiliki dukungan HTML 5 sehingga penting untuk menguji kompatibilitas browser sebelum menggunakan File API. Ada empat metode bawaan di FileReader API untuk membaca file lokal
- FileReader. bacaAsArrayBuffer(). Membaca isi file input yang ditentukan. Atribut hasil berisi ArrayBuffer yang mewakili data file
- FileReader. bacaAsBinaryString(). Membaca isi file input yang ditentukan. Atribut hasil berisi data biner mentah dari file sebagai string
- FileReader. bacaAsDataURL(). Membaca isi file input yang ditentukan. Atribut hasil berisi URL yang mewakili data file
- FileReader. readAsText(). Membaca isi file input yang ditentukan. Atribut hasil berisi konten file sebagai string teks. Metode ini dapat menggunakan versi penyandian sebagai argumen kedua (jika diperlukan). Pengkodean default adalah UTF-8
Dalam hal ini kita menggunakan FileReader. metode readAsText() untuk membaca lokal. txt
<!DOCTYPE html>_
<html>
_
<head>_
<title>Read Text File</title>
</head>
_
<body>
<html>0<html>1 <html>2<html>3
<html>4<html>5<html>3<html>7
<html>9
_0
2 3 4
_5
7 8<html>7
<head>0<head>1<head>2<head>3
<html>4<head>5<head>6<head>7<head>8<head>9
_0
<html>4 2 3 4 5
<html>4 7<head>8 9
<title>Read Text File</title>0<head>1<title>Read Text File</title>2<head>3
________11const file = new File(["foo"], "foo.txt", { type: "text/plain", }); _11_______5
<html>4<title>Read Text File</title>7
_0
<html>4</head>0</head>1</head>2
<head>0</head>4
</head>6
</head>7
_
</head>_9
Kode ini mencetak konten file input persis sama dengan yang ada di file input
JavaScript terkenal untuk pengembangan halaman web tetapi juga digunakan di berbagai lingkungan non-browser. Anda dapat mempelajari JavaScript dari awal dengan mengikuti Tutorial JavaScript dan Contoh JavaScript ini
Objek seperti Array, memiliki ArrayBuffer, TypedArray, DataView, Blob, string, atau campuran dari salah satu elemen tersebut, yang akan diletakkan di dalam File. Perhatikan bahwa string di sini dikodekan sebagai UTF-8, tidak seperti string UTF-16 JavaScript biasa
const file = new File(["foo"], "foo.txt", { type: "text/plain", }); _1String yang mewakili nama file atau jalur ke file
const file = new File(["foo"], "foo.txt", { type: "text/plain", }); 2 OpsionalObjek opsi yang berisi atribut opsional untuk file. Pilihan yang tersedia adalah sebagai berikut
const file = new File(["foo"], "foo.txt", { type: "text/plain", }); _3Sebuah string yang mewakili tipe MIME dari konten yang akan dimasukkan ke dalam file. Default ke nilai const file = new File(["foo"], "foo.txt", { type: "text/plain", }); 4
const file = new File(["foo"], "foo.txt", { type: "text/plain", }); 5Angka yang mewakili jumlah milidetik antara zaman waktu Unix dan saat file terakhir diubah. Default ke nilai const file = new File(["foo"], "foo.txt", { type: "text/plain", }); 6