Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk membaca fail teks tempatan dalam html

Bagaimana untuk membaca fail teks tempatan dalam html

下次还敢
下次还敢asal
2024-04-05 11:03:22795semak imbas

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>

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>

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>
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!

Kenyataan:
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