Kita dapat membaca dan melihat konten file teks menggunakan objek FileReader() di browser atau terminal kita menggunakan JavaScript
Apa itu FileReader() ?
FileReader()_ adalah objek yang disediakan oleh JavaScript yang memungkinkan aplikasi web membaca konten file yang disimpan di komputer pengguna. Ia menggunakan objek File atau Blob untuk menentukan atau membaca konten file
FileReader dapat membaca file teks yang dipilih secara khusus oleh pengguna
Mari kita lihat dengan sebuah contoh
Baca File Teks Lokal Menggunakan JavaScript
Di sini, kami akan mengunggah file teks sederhana (. txt) menggunakan kolom input HTML dan menampilkan kontennya di terminal/konsol kami
Kode HTML
<body> <h1> Read Local text file using JavaScript </h1> <input type="file" name="myfile" id="myfile" /> <p>check console for result</p> <script src="main.js"></script> </body>
kode JavaScript
let file = document.getElementById("myfile"); file.addEventListener("change", function () { var reader = new FileReader(); reader.onload = function (progressEvent) { console.log(this.result); }; reader.readAsText(this.files[0]); }); _
Penjelasan Kode
Di sini, kami memiliki kolom input yang membantu kami memilih file teks dari komputer kami
Dalam file Script, kami telah memilih file menggunakan getElementById()
Kami telah menambahkan pendengar acara ke file, yang mendengarkan acara change. Itu dipicu ketika file dipilih di kolom input
Setelah acara perubahan dipicu, fungsi akan membaca file menggunakan FileReader() dan kemudian konsol. catat konten di dalamnya ke terminal browser Anda
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
________12______0<head>1<title>Read Text File</title>2<head>3
<title>Read Text File</title>4<title>Read Text File</title>5
________8getElementById()_12_______7
_0
<html>4</head>0</head>1</head>2
________10<body> <h1> Read Local text file using JavaScript </h1> <input type="file" name="myfile" id="myfile" /> <p>check console for result</p> <script src="main.js"></script> </body> _13_______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