So lesen Sie lokale Textdateien in HTML

下次还敢
Freigeben: 2024-04-05 11:03:22
Original
800 Leute haben es durchsucht

HTML selbst kann lokale Dateien nicht direkt lesen, aber es kann mit den folgenden Methoden gelöst werden: Verwendung der FileReader-API: Verwenden Sie die readAsText()-Methode der FileReader-API, um den Inhalt der Textdatei zu lesen. Verwenden von XMLHttpRequest: Verwenden Sie XMLHttpRequest (XHR), um eine HTTP-Anfrage an den Server zu senden, um eine lokale Datei zu lesen. Verwenden der Fetch-API: Verwenden Sie die Fetch-API zum Senden von HTTP-Anfragen, ähnlich wie XMLHttpRequest, bietet jedoch eine modernere Möglichkeit.

So lesen Sie lokale Textdateien in HTML

So lesen Sie lokale Textdateien in HTML

HTML selbst kann nicht direkt auf das lokale Dateisystem zugreifen. Wir können dieses Problem jedoch lösen, indem wir:

Mit der FileReader-API

Die FileReader-API bietet readAsText() eine Methode, die zum Lesen von Textdateiinhalten verwendet werden kann:

<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>
Nach dem Login kopieren

Mit XMLHttpRequest

XMLHttpRequest (XHR) ist eine An API, die über HTTP-Anfragen mit dem Server interagiert. Wir können dies verwenden, um lokale Dateien zu lesen:

<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>
Nach dem Login kopieren

Mit der Fetch-API

Die Fetch-API ist eine Alternative zu XHR und bietet eine modernere Möglichkeit, HTTP-Anfragen zu verarbeiten:

<code class="html"><script>
  fetch('local-file.txt')
  .then(response => response.text())
  .then(text => {
    // 使用 text
  })
  .catch(error => {
    // 处理错误
  });
</script></code>
Nach dem Login kopieren

HINWEIS: Aus Sicherheitsgründen kann diese Methode Lesen Sie nur Textdateien aus derselben Quelle (Domäne, Protokoll und Port).

Das obige ist der detaillierte Inhalt vonSo lesen Sie lokale Textdateien in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage