Seringkali kita harus dapat membaca dan mengunggah file ke situs web dan aplikasi web kita. Ada banyak plugin dan pustaka untuk membantu Anda melakukannya. Namun terkadang Anda hanya ingin membaca file teks lokal di browser web menggunakan JavaScript, dan memproses datanya atau hanya menampilkan kontennya di halaman web. Pada artikel ini, kita akan belajar bagaimana melakukan ini
Cara Membaca File Teks Lokal di Browser Menggunakan JavaScript
Berikut adalah langkah-langkah untuk membaca file teks lokal di browser menggunakan JavaScript. Tambahkan ini di halaman HTML Anda
<script> function readTextFile(file) { var rawFile = new XMLHttpRequest(); rawFile.open("GET", file, false); rawFile.onreadystatechange = function () { if(rawFile.readyState === 4) { if(rawFile.status === 200 || rawFile.status == 0) { var allText = rawFile.responseText; alert(allText); } } } rawFile.send(null); } </script>Mari kita lihat kode di atas secara detail. Pertama kita membuat XMLHTTPRequest. Kemudian kami memanggil fungsi open() untuk memuat file secara lokal. Kami memeriksa apakah kode statusnya adalah 0 dan jika demikian, kami menyimpan konten file dalam variabel allText
Anda dapat memanggil fungsi di atas seperti yang ditunjukkan di bawah ini. Penting untuk menggunakan file. // awalan saat menentukan jalur file
readTextFile("file:///C:/your/path/to/file.txt");_Namun harap dicatat, kode di atas perlu ditambahkan ke file HTML lokal yang dibuka di browser web lokal. Ini tidak akan berfungsi jika Anda mengunggahnya ke server web dan mengaksesnya melalui URL HTTP/HTTPS. Ini karena browser modern tidak mengizinkan permintaan lintas asal, yaitu dari HTTP. // untuk mengajukan. //. Jadi hanya ketika Anda menambahkannya ke file HTML dan membukanya secara lokal di browser web, halaman web Anda akan terbuka dengan file. // di URL browser, dan permintaan dikirim ke file. ///C. /your/path/ke/file. txt yang memiliki asal yang sama
Pada artikel ini, kita telah mempelajari cara membaca file teks lokal menggunakan JavaScript. Tapi harap diperhatikan, JS tidak bisa membaca file sendiri. Pengguna harus meneruskan file melalui unggahan atau beberapa fungsi lainnya
kami harap Anda menyukai produk yang kami rekomendasikan, kami dapat memperoleh komisi kecil dari pembelian menggunakan tautan afiliasi Anda, dan itu sangat membantu kami terus bekerja dengan baik
Daftar isi
JavaScript tidak memiliki akses langsung ke file lokal karena keamanan dan privasi. Dengan menggunakan input file dan pembaca File, Anda dapat membaca satu atau beberapa file lokal. Kami dapat menawarkan kepada pengguna kemungkinan untuk memilih file melalui elemen "input file" yang kemudian dapat kami proses. Input "file" memiliki properti "files" dengan file yang dipilih. Kita dapat menggunakan "Pembaca File" untuk mengakses konten file yang dipilih
Bagaimana itu bekerja
Karena file lokal tidak dapat diakses dari perangkat pengguna menggunakan JavaScript I browser,
Membaca file lokal dengan JavaScript, kita perlu memberi pengguna cara untuk memilih satu atau beberapa file untuk kita gunakan
Ini dapat dilakukan dengan elemen input file HTML
<input type="file" id="fileInput">Jika Anda ingin mengizinkan pemilihan beberapa file, Anda dapat menambahkan beberapa atribut
<input type="file" id="fileInput" multiple>Anda bisa menggunakan acara perubahan bidang input untuk merespons pemilihan file
atau tambahkan elemen UI lain agar pengguna dapat memulai pemrosesan file yang dipilih secara eksplisit
Juga mencatat. Pemilihan file dengan elemen input tidak mengunggah file di mana pun,
satu-satunya hal yang terjadi adalah file menjadi tersedia untuk JavaScript di halaman
Input file memiliki properti file yang merupakan daftar (karena mungkin ada beberapa file yang dipilih) dari objek File
Objek File terlihat seperti ini
{ name: 'test.txt', // the name of the selected file size: 1024, // the size in bytes type: 'text/plain', // the assumed file type based on file extension. This might be incorrect. lastModified: 12345567890, // timestamp of the last change according to the user's system lastModifiedDate: 'Thu Jul 04 2019 09:22:51 GMT+0200 (Central European Summer Time)' // a date object for the last modified timestamp }Sekarang kami memiliki kemampuan untuk memilih file dan melihat metadatanya, tetapi bagaimana kami dapat mengakses konten file?
Untuk mendapatkan konten sebenarnya dari file yang dipilih, kita membutuhkan File Reader
Pembaca file mengambil objek File dan menawarkan metode untuk mendapatkan akses ke data sebagai
- serangkaian data teks
- URL data
- serangkaian data biner
- Buffer Array yang berisi data biner mentah
Anda dapat membaca dan memproses file menggunakan File API jika Anda memilih file melalui <input type="file">, Pembuat browser populer biasanya tidak mengizinkan kode JavaScript untuk mengakses file. Dengan memiliki URL lokalnya, JavaScript tidak dapat mengakses file, itulah ide utamanya. Namun, dengan memiliki URL Data dari suatu file, kode JavaScript dapat menggunakan file tersebut. Oleh karena itu, jika Anda menelusuri file dan membukanya, alih-alih mendapatkan "URL" langsung dari HTML, JavaScript seharusnya bisa mendapatkan "Data URL"
Berikut adalah beberapa tantangan yang dialami banyak orang saat mencoba mengakses file menggunakan JavaScript
Akses file lokal dengan JavaScript
Untuk menggunakan JavaScript untuk mengakses file dan folder, saat ini kami memiliki dua cara dua cara untuk melakukannya
- Menggunakan ekstensi JavaScript (dijalankan dari Editor JavaScript)
- Dengan menggunakan halaman web dan objek ActiveX (hanya Internet Explorer)
Baca file dalam JavaScript
Di browser baru, JavaScript biasanya tidak dapat mengakses file lokal di browser baru, tetapi objek XMLHttpRequest dapat digunakan untuk membaca file. Jadi, sebenarnya Ajax (dan bukan JavaScript) yang membaca file tersebut. Berikut adalah contoh untuk membaca file abc. txt