Bagaimanakah Saya Boleh Membaca Fail Teks Tempatan dengan Cekap dalam Pelayar Web?

Membaca Fail Teks Setempat dalam Penyemak Imbas

XMLHttpRequest ialah kaedah yang biasa digunakan untuk mendapatkan semula data tak segerak dalam penyemak imbas, tetapi kadangkala ia boleh dihadapi isu semasa cuba membaca fail teks setempat.

Isu dengan XMLHttpRequest

Satu ralat biasa ialah XMLHttpRequest pengecualian 101, yang menunjukkan bahawa permintaan itu telah dibatalkan. Ini boleh berlaku apabila cuba membaca fail tempatan tanpa menyatakan protokol "file://".

Alternatif: Ambil API

Cara yang lebih mudah untuk membaca teks setempat fail adalah melalui API Ambil, yang diperkenalkan pada 2015. Contoh kod menggunakan API Ambil untuk membaca fail tempatan bernama "myText.txt":

fetch("myText.txt")
  .then((res) => res.text())
  .then((text) => {
    // Process the text data
  })
  .catch((e) => console.error(e));

Mengakses Fail Setempat

Pelayar moden mengenakan sekatan ketat ke atas akses sistem fail langsung. Elakkan menggunakan "file:///". Sebaliknya, pertimbangkan untuk menggunakan pelayan web ringan seperti Python -m http.server atau npx http-server untuk memuatkan data melalui URL HTTP biasa.

Contoh Kod dengan XMLHttpRequest

Jika menggunakan XMLHttpRequest, semak status 0 secara manual (menunjukkan fail setempat) dan bukannya bergantung pada status yang dikembalikan kod:

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;
        console.log(allText);
      }
    }
  };
  rawFile.send(null);
}

Menentukan Laluan Fail

Ingat untuk memasukkan protokol "file://" apabila menentukan laluan fail:

readTextFile("file:///C:/your/path/to/file.txt");

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membaca Fail Teks Tempatan dengan Cekap dalam Pelayar Web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!