Dapat javascript membaca file lokal

Tutorial ini akan menunjukkan cara membaca file dari sistem file lokal dengan menerapkan langkah-langkah berikut

  • Allowing the user to choose file from the device through file element.
  • Membaca metadata (nama, jenis & ukuran) file menggunakan properti objek File yang dipilih.
  • Membaca isi file menggunakan objek FileReader .

Langkah 1 — Izinkan Pengguna Memilih File









Langkah 2 — Baca Metadata File (Nama, Jenis & Ukuran) menggunakan Properti Objek File

File yang dipilih oleh pengguna dapat diakses sebagai objek File di Javascript. Properti nama, tipe & ukuran dari objek File ini memberikan metadata dari file yang dipilih.

document.querySelector("#read-button").addEventListener('click', function() {
	if(document.querySelector("#file-input").files.length == 0) {
		alert('Error : No file selected');
		return;
	}

	// file selected by user
	let file = document.querySelector("#file-input").files[0];

	// file name
	let file_name = file.name;

	// file MIME type
	let file_type = file.type;

	// file size in bytes
	let file_size = file.size;
});
_

Langkah 3 — Baca Konten File menggunakan FileReader Objek

Isi objek File yang dipilih dibaca menggunakan FileReader object. Reading is performed asynchronously, and both text and binary file formats can be read.

  • File teks (TXT, CSV, JSON, HTML dll) dapat dibaca menggunakan metode readAsText() .
  • File biner (EXE, PNG, MP4 dll) dapat dibaca menggunakan metode readAsArrayBuffer() .
  • String url data dapat dibaca menggunakan metode readAsDataURL() .
document.querySelector("#read-button").addEventListener('click', function() {
	if(document.querySelector("#file-input").files.length == 0) {
		alert('Error : No file selected');
		return;
	}

	// file selected by user
	let file = document.querySelector("#file-input").files[0];

	// new FileReader object
	let reader = new FileReader();

	// event fired when file reading finished
	reader.addEventListener('load', function(e) {
	   // contents of the file
	    let text = e.target.result;

	    document.querySelector("#file-contents").textContent = text;
	});

	// event fired when file reading failed
	reader.addEventListener('error', function() {
	    alert('Error : Failed to read file');
	});

	// read file as text file
	reader.readAsText(file);
});

FAQ lainnya tentang Membaca File dengan Javascript

Bagaimana memantau kemajuan membaca file?

Peristiwa kemajuan dari objek FileReader menangani pembacaan .

// file read progress event
reader.addEventListener('progress', function(e) {
	if(e.lengthComputable == true) {
		// percentage of the file read
		let percent_read = Math.floor((e.loaded/e.total)*100);
	    	console.log(percent_read + '% read');
	}
});

Bagaimana cara membaca file biner?

Untuk mendapatkan data biner file, readAsBinaryString() / readAsArrayBuffer method needs to be used.

Baca Membaca File dan Mendapatkan Data Binernya dalam Javascript untuk detail lebih lanjut

Bagaimana cara membaca file yang ada di server?

File di server dapat dibaca dengan Javascript dengan mengunduh file dengan AJAX dan mem-parsing respons server

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




_

 _

    Read Text File

 _

    01 23

4537

    9

 _0

     2 3 4

 _5

     7 87

0123

456789

    _0

4    2     3    4     5

4    78    9

Read Text File01Read Text File23

Read Text File4Read Text File5

4Read Text File7

    _0

4012

04

    6

_7

 _

_9

Dapat javascript membaca file lokal

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

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

Bisakah Anda membaca file dengan JavaScript?

Untuk membaca file, gunakan FileReader , yang memungkinkan Anda membaca konten objek File ke dalam memori. Anda dapat menginstruksikan FileReader untuk membaca file sebagai buffer array, URL data, atau teks.

Bagaimana cara membaca jalur file lokal di JavaScript?

File lokal dapat dibuka dan dibaca di browser menggunakan objek Javascript FileReader. .
Langkah 1 — Izinkan Pengguna Memilih File. .
Langkah 2 — Baca Metadata File (Nama, Jenis & Ukuran) menggunakan Properti Objek File

Bisakah JavaScript memodifikasi file lokal?

Anda tidak dapat mengubah file lokal dari Javascript .