Dalam tutorial ini kami akan menunjukkan kepada Anda solusi membaca file teks dan menampilkan dalam HTML menggunakan JavaScript, di sini kami mendefinisikan tag input file untuk mengumpulkan file teks dan dalam objek pembaca file yang ditentukan skrip dan kami memuat file teks yang diunggah menggunakan acara onload
Kami mengambil semua teks dari file menggunakan objek pembaca file dan menambahkan elemen div yang ditentukan dalam blok html untuk menampilkan seluruh konten dalam file teks yang diunggah dengan metode readAsText[]
Panduan Langkah Demi Langkah Membaca File Teks Dan Menampilkan Dalam HTML Menggunakan JavaScript. -
Di sini kami mendefinisikan tag input dengan tipe file untuk mengunggah file teks dan tag div yang ditentukan dengan id 'res' untuk menambahkan konten file yang diambil di halaman web
Dalam skrip kami menambahkan pendengar acara pada tag input dengan id 'infl' lalu mendefinisikan fungsi di dalamnya untuk membaca file teks
Di sini kita membuat objek pembaca file 'file_reader' kemudian kita menambahkan acara onload dengan fungsi yang kemudian ditentukan, di dalamnya kita mengatur posisi objek file_reader kemudian menggunakan metode readAsText[] kita membaca konten file teks dari posisi pertama dan menambahkan semua konten pada elemen div
Read and Display Text File
document.getElementById['infl'].addEventListener['change',function[]{
var file_reader=new FileReader[];
file_reader.onload=function[]{
document.getElementById['res'].textContent=file_reader.result;
}
file_reader.readAsText[this.files[0]];
}]
- yang menginstruksikan browser web tentang versi file HTML apa yang ditulis dan tidak memiliki tag penutup
- The tag is used to indicate the beginning of HTML document.
- As above shown tag is contains information about webpage and external file links are declared here. tag is used for set the webpage title.
- Both and tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Dalam html kami mendefinisikan tag masukan dengan jenis file untuk mengunggah file teks apa pun dan tag div ditentukan dengan id 'res' untuk menambahkan konten yang diambil di halaman web
- In we adding addEventListener event on input tag by id ‘infl’ using that we defining ‘change’ function, within that we created file reader object ‘file_reader’.
- Kami menambahkan acara onload untuk fungsi yang ditentukan, di sini kami menambahkan pembaca file pada elemen div 'res' kemudian menggunakan metode readAsText [] dengan objek pembaca file kami membaca semua konten dari posisi ke-0 dan menambahkan elemen div
- Kedua tag , ditutup masing-masing. Tag menandakan akhir dari isi, Kemudian tag menandakan akhir dari dokumen HTML
Kesimpulan. -
Kesimpulannya sekarang kita sudah bisa mengetahui cara membaca file teks dan menampilkannya dalam html menggunakan javascript
Saat kami menjalankan program ini di browser, kami dapat melihat opsi pengunggahan file yang perlu diunggah pengguna. txt ketik salah satu file kemudian hasil dari file yang berisi teks akan ditampilkan pada halaman web
Jika Anda mengunggah beberapa file jenis lain berarti itu diambil dan ditampilkan tetapi kami tidak dapat membacanya karena kami perlu memformatnya
Untuk membaca semua jenis file kita perlu menggunakan pembaca file dengan beberapa proses lain nanti kita akan melihatnya
Saya harap tutorial membaca file teks dan menampilkan dalam HTML menggunakan JavaScript ini membantu Anda dan langkah-langkah serta metode yang disebutkan di atas mudah diikuti dan diterapkan
Dalam tutorial ini, kita akan belajar membuat dan menyimpan file teks dalam JavaScript. Terkadang, pengembang perlu mendapatkan teks atau konten dari pengguna dan mengizinkan pengguna untuk menyimpan konten dalam file teks dan mengizinkan file untuk diunduh ke komputer lokal
Banyak pustaka JavaScript tersedia untuk mencapai tujuan kami, tetapi kami telah menggunakan dua pustaka terbaik dalam tutorial ini untuk membuat dan menyimpan file teks
Buat file teks menggunakan teks khusus dan simpan ke komputer lokal
Kami akan menggunakan operasi JavaScript normal untuk membuat dan menyimpan file teks di komputer pengguna. Pengguna dapat menggunakan tag HTML untuk membuat file teks dari konten khusus dan menyimpannya
Pengembang harus mengikuti sintaks di bawah ini untuk membuat file teks dari input teks dan menyimpannya
Sintaksis
// Create element with tag const link = document.createElement["a"]; // Create a blog object with the file content which you want to add to the file const file = new Blob[[content], { type: 'text/plain' }]; // Add file content in the object URL link.href = URL.createObjectURL[file]; // Add file name link.download = "sample.txt"; // Add click event to tag to save file. link.click[]; URL.revokeObjectURL[link.href];_
Dalam sintaks di atas, kami telah mengambil konten dari pengguna, mengonversinya menjadi objek blog, lalu menyimpannya ke file teks
Algoritma
Pengguna harus mengikuti langkah-langkah di bawah ini untuk memahami sintaks di atas
Langkah 1 - Buat elemen HTML
Langkah 2 - Dapatkan konten untuk ditambahkan ke file teks
Langkah 3 - Buat objek Blob konten
Langkah 4 - Di atribut href dari tag, tambahkan URL objek blog
Langkah 5 - Tambahkan nama file default sebagai nilai atribut 'unduh' dari tag
Langkah 6 - Panggil acara click[] pada tag untuk menyimpan file di komputer lokal
Contoh
Kami telah menulis kode pada contoh di bawah ini dengan mengikuti sintaks dan algoritma. Kami telah membuat HTML. Pengguna dapat memasukkan konten yang ingin mereka tambahkan ke file dan mengklik tombol 'simpan file' untuk menyimpan file teks di komputer
Ketika pengguna mengklik tombol 'simpan file', itu akan memanggil fungsi 'downloadFile []', di mana kami telah menambahkan kode untuk membuat dan menyimpan file teks
Create a text file and save it to a local computer using JavaScript.
Enter the file content:-
save File
Gunakan pustaka FileSaver JavaScript untuk membuat dan menyimpan file teks
'FileSaver' adalah pustaka JavaScript yang dapat kita gunakan untuk membuat file teks dalam JavaScript vanilla. Pengguna dapat menggunakan CDN perpustakaan untuk menggunakannya dengan HTML dan JavaScript
Pengguna harus menggunakan sintaks di bawah ini untuk menggunakan pustaka FileSaver
Sintaksis
// Create blob object with file content
var blob = new Blob[["This is a sample file content."], {
type: "text/plain;charset=utf-8",
}];
// Create and save the file using the FileWriter library
saveAs[Content, fileName];
Dalam sintaks di atas, kami telah menggunakan beberapa teks untuk membuat objek blob dari tipe 'teks'. Selain itu, kami telah menggunakan fungsi 'saveAs[]' dari pustaka FileWriter untuk membuat dan menyimpan file teks
Parameter
Fungsi 'saveAs' membutuhkan dua parameter
Konten − Ini adalah konten yang perlu disimpan dalam file
filename − Ini adalah nama file default saat pengguna mengunduhnya
Contoh
Kami telah menambahkan CDN dari pustaka 'FileWriter' di bagian kode di bawah ini. Saat pengguna mengeklik tombol 'buat file teks', fungsi 'BuatTeksFile[]' akan dipanggil dalam JavaScript, yang membuat objek blob dari kalimat 'Ini adalah konten file sederhana' dan menjalankan 'saveAs[]'
_
Create text file and save it to local computer using FileSaver JavaScript Library.
Create Text File
Simpan konten gambar dalam file teks menggunakan pustaka FileSaver JavaScript
Di bagian ini, kami telah menggunakan perpustakaan yang sama, 'FileSaver', tetapi alih-alih menyimpan teks normal ke file, kami merangkai gambar setelah mengonversi gambar menjadi objek blob
Pengguna dapat mengikuti sintaks di bawah ini untuk menyimpan gambar dalam format file teks dan menyimpannya
Sintaksis
// Access the file input by Id
var element = document.getElementById["uploadedImage"];
// Add onchange event to file input
element.onchange = function [event] {
// Convert image content to text
var blob = new Blob[event.target.files[0]], {
type: "text/plain;charset=utf-8",
}];
// Create text file using image’s content and save it
saveAs[blob, "download.txt"];
};
Dalam sintaks di atas, kami mengambil file yang diunggah pengguna ke dalam HTML dan mengonversi kontennya menjadi objek blob. Setelah itu, kami membuat file teks menggunakan objek blob dan menyimpan file tersebut ke komputer lokal
Contoh
Kami telah menggunakan pustaka JavaScript 'FileSaver' dalam contoh di bawah ini, seperti yang ditunjukkan dalam sintaks di atas. Kami telah membuat bidang input file, memungkinkan pengguna hanya mengunggah file gambar
Dalam JavaScript, kami telah menambahkan pendengar acara ke masukan file, dan saat pengguna mengunggah file, itu akan membuat file teks menggunakan file gambar yang diunggah dan menyimpannya ke komputer pengguna