So lesen Sie lokale Textdateien in HTML

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

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>

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>

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>

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!