HTMLでローカルテキストファイルを読み取る方法

HTML 自体はローカル ファイルを直接読み取ることができませんが、次の方法で解決できます。 FileReader API の使用: FileReader API の readAsText() メソッドを使用して、テキスト ファイルのコンテンツを読み取ります。 XMLHttpRequest の使用: XMLHttpRequest (XHR) を使用して、サーバーに HTTP リクエストを送信し、ローカル ファイルを読み取ります。 Fetch API の使用: Fetch API を使用して HTTP リクエストを送信します。これは XMLHttpRequest に似ていますが、より現代的な方法を提供します。

#HTML でローカル テキスト ファイルを読み取る方法

HTML 自体はローカル ファイル システムに直接アクセスできません。ただし、この問題は次の方法で解決できます。

FileReader API を使用する

FileReader API には

readAsText() メソッドが用意されています。これは、「テキスト ファイルのコンテンツの取得」を読み取るために使用できます。

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

XMLHttpRequest の使用

XMLHttpRequest (XHR) は、HTTP リクエストを通じてサーバーと対話する API です。これを使用してローカル ファイルを読み取ることができます:

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

Fetch API の使用

Fetch API は XHR の代替手段であり、HTTP リクエストを処理するためのより現代的な方法を提供します。 ##

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

注: セキュリティ上の理由により、これらのメソッドは同じソース (ドメイン、プロトコル、ポート) からのテキスト ファイルのみを読み取ることができます。

以上がHTMLでローカルテキストファイルを読み取る方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。