Dapatkah javascript membaca file lokal?

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

<input type="file" id="fileInput">
<script>
    document.getElementById("fileInput").addEventListener("change", function selectedFileChanged() {
      console.log(this.files); 
      // will contain information about the file that was selected.
    });
</script>

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

1. Menggunakan ekstensi JavaScript (dijalankan dari Editor JavaScript)
2. 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

Bagaimana cara membaca file teks lokal dalam JavaScript?

Bagaimana cara membaca jalur file lokal di JavaScript?

Bagaimana cara membuka file HTML lokal di JavaScript?

Bisakah JavaScript memodifikasi file lokal?