Javascript mengedit file teks lokal

Question

Kita dapat membaca dan melihat konten file teks menggunakan objek FileReader() di browser atau terminal kita menggunakan JavaScript

Table of Contents Show

Apa itu FileReader() ?
Baca File Teks Lokal Menggunakan JavaScript
Bisakah JavaScript memodifikasi file lokal?
Bagaimana cara membaca file teks lokal dalam JavaScript?
Bagaimana cara menulis file teks lokal 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

Bisakah JavaScript memodifikasi file lokal?

Anda tidak dapat mengubah file lokal dari Javascript .

Bagaimana cara membaca file teks lokal dalam JavaScript?

readAsText() metode untuk membaca lokal. .

bacaAsArrayBuffer(). Membaca isi file input yang ditentukan. .

bacaAsBinaryString(). Membaca isi file input yang ditentukan. .

bacaAsDataURL(). Membaca isi file input yang ditentukan

Bagaimana cara menulis file teks lokal menggunakan JavaScript?

Impor fs-module dalam program dan gunakan fungsi untuk menulis teks ke file dalam sistem . Fungsi berikut akan membuat file baru dengan nama yang diberikan jika tidak ada, selain itu akan menulis ulang file menghapus semua data sebelumnya di dalamnya. Fungsi yang Digunakan. Fungsi writeFile() digunakan untuk menulis operasi.

kode javascript