ホームページ > ウェブフロントエンド > htmlチュートリアル > HTMLでローカルテキストファイルを読み取る方法

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

下次还敢
リリース: 2024-04-05 11:03:22
オリジナル
830 人が閲覧しました

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

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

#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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート