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

ブラウザでのローカル テキスト ファイルの読み取り

XMLHttpRequest はブラウザでの非同期データ取得によく使用されるメソッドですが、場合によってはローカルテキストを読み取ろうとするときの問題files.

XMLHttpRequest に関する問題

よくあるエラーの 1 つは、リクエストが中止されたことを示す XMLHttpRequest 例外 101 です。これは、「file://」プロトコルを指定せずにローカル ファイルを読み取ろうとしたときに発生する可能性があります。

代替: Fetch API

ローカル テキストを読み取るためのより簡単な方法ファイルは、2015 年に導入された Fetch API を介して取得されます。Fetch API を使用して、次の名前のローカル ファイルを読み取るコード例"myText.txt":

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

ローカル ファイルへのアクセス

最新のブラウザでは、ファイル システムへの直接アクセスに厳しい制限が課されています。 「file:///」の使用は避けてください。代わりに、Python -m http.server や npx http-server などの軽量 Web サーバーを使用して、通常の HTTP URL 経由でデータをロードすることを検討してください。

XMLHttpRequest のサンプル コード

を使用する場合XMLHttpRequest、返されたステータスに依存するのではなく、手動でステータス 0 (ローカル ファイルを示す) を確認します。コード:

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);
}

ファイル パスの指定

ファイル パスを指定するときは、必ず「file://」プロトコルを含めてください:

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

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