Bagaimana untuk membaca fail teks tempatan dalam html

下次还敢
Lepaskan: 2024-04-05 11:03:22
asal
793 orang telah melayarinya

HTML itu sendiri tidak boleh membaca fail setempat secara langsung, tetapi ia boleh diselesaikan dengan kaedah berikut: Menggunakan API FileReader: Gunakan kaedah readAsText() API FileReader untuk membaca kandungan fail teks. Menggunakan XMLHttpRequest: Gunakan XMLHttpRequest (XHR) untuk menghantar permintaan HTTP kepada pelayan untuk membaca fail setempat. Menggunakan API Ambil: Gunakan API Ambil untuk menghantar permintaan HTTP, serupa dengan XMLHttpRequest, tetapi menyediakan cara yang lebih moden.

Bagaimana untuk membaca fail teks tempatan dalam html

Cara membaca fail teks tempatan dalam HTML

HTML itu sendiri tidak boleh mengakses sistem fail tempatan secara langsung. Walau bagaimanapun, kami boleh menyelesaikan masalah ini dengan:

Menggunakan FileReader API

FileReader API menyediakan kaedah readAsText(), yang boleh digunakan untuk membaca kandungan fail teks:

<code class="html"><input type="file" id="file-input">

<script>
  const fileInput = document.getElementById('file-input');
  fileInput.addEventListener('change', (e) => {
    const file = e.target.files[0];
    const reader = new FileReader();
    reader.onload = (e) => {
      const text = e.target.result;
      // 使用 text
    };
    reader.readAsText(file);
  });
</script></code>
Salin selepas log masuk

Menggunakan An XMLHttpRequest

aMLHX) API yang berinteraksi dengan pelayan melalui permintaan HTTP. Kita boleh menggunakan ini untuk membaca fail tempatan:

<code class="html"><script>
  const request = new XMLHttpRequest();
  request.open('GET', 'local-file.txt');
  request.onload = () => {
    const text = request.responseText;
    // 使用 text
  };
  request.send();
</script></code>
Salin selepas log masuk

Menggunakan Fetch API

Fetch API ialah alternatif kepada XHR dan menyediakan cara yang lebih moden untuk mengendalikan permintaan HTTP:

<code class="html"><script>
  fetch('local-file.txt')
  .then(response => response.text())
  .then(text => {
    // 使用 text
  })
  .catch(error => {
    // 处理错误
  });
</script></code>
Salin selepas log masuk
NOTA: Atas sebab keselamatan, Kaedah ini boleh hanya membaca fail teks daripada sumber yang sama (domain, protokol dan port).

Atas ialah kandungan terperinci Bagaimana untuk membaca fail teks tempatan dalam html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan