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

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

ローカル テキスト ファイルをブラウザに読み取るために、開発者は従来 XMLHttpRequest を使用していました。これを行う 1 つの方法は、ファイルのパスを取得し、テキストの各行を文字配列に変換する関数を使用することです。

function readTextFile() {
  var rawFile = new XMLHttpRequest();
  rawFile.open("GET", "testing.txt", true);
  rawFile.onreadystatechange = function() {
    if (rawFile.readyState === 4) {
      var allText = rawFile.responseText;
      document.getElementById("textSection").innerHTML = allText;
    }
  }
  rawFile.send();
}

ただし、このアプローチは、Firefox 以外のブラウザでは例外が発生して失敗することがよくあります。これを解決するには、開発者は JS 2015 で導入された Fetch API を使用する必要があります:

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

さらに、セキュリティ上の理由から、file:/// の使用を避けることが重要です。代わりに、Python の http.server や HTTP-Server などの軽量 Web サーバーをデータの読み込みに使用することを検討してください。

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

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

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