Web ブラウザでローカル テキスト ファイルを読み取るにはどうすればよいですか?

ブラウザでローカル テキスト ファイルを読み取る方法

XMLHttpRequest を使用して単純なテキスト ファイル リーダーを実装しようとすると、正しく機能しない可能性があります。この記事では、潜在的な問題を調査し、それらを修正するための解決策を示します。

XMLHttpRequest 例外 101

XMLHttpRequest リクエストがローカル ファイル パスで行われると、例外 101 が発生することがあります。これは次の理由で発生します。最新のブラウザでは、ファイル システムへの直接アクセスが厳しく制限されています。これを回避するには、file:/// パスの使用を避けてください。

Fetch API (XMLHttpRequest の代替)

URL からデータを取得するための、より現代的でユーザーフレンドリーなアプローチは、Fetch API です。 JSで導入されました。次のコードはその使用法を示しています。

fetch("myText.txt")
  .then((res) => res.text())
  .then((text) => {
    // Process the text
   })
  .catch((e) => console.error(e));

ローカル ファイルの XMLHttpRequest 構成

XMLHttpRequest を使用したローカル ファイル リクエストの場合、ステータスが返されないため、ステータス 0 と 200 の両方を確認する必要があります。 Web サーバー:

function readTextFile(file) {
  var rawFile = new XMLHttpRequest();
  rawFile.open("GET", file, false);
  rawFile.onreadystatechange = function () {
    if(rawFile.readyState === 4)  {
      if(rawFile.status === 200 || rawFile.status == 0) {
        var allText = rawFile.responseText;
        console.log(allText);
       }
    }
  }
  rawFile.send(null);
}

ファイルの指定パス

ローカル ファイルで XMLHttpRequest を使用する場合、ファイル名に file:// プロトコルを指定することが必須です:

readTextFile("file:///C:/your/path/to/file.txt");

以上がWeb ブラウザでローカル テキスト ファイルを読み取るにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。