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

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

ファイルのパスを受け取り、テキストの各行を char 配列に変換する関数を作成して、単純なテキスト ファイル リーダーを実装しようとしていますが、うまくいきません。

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

ここで何が間違っているのでしょうか?

コードを少し変更した後でもまだ動作しないようです。前回の改訂そして今、例外 101 が発生していますXMLHttpRequest

Firefox でテストしたところ、動作するのですが、Google Chrome では動作せず、例外 101 が繰り返し発生します。これを Firefox だけでなく、他のブラウザ (特に Chrome) でも動作させるにはどうすればよいですか?

ベストアンサー1

JS は 2015 年に Fetch API を導入し、XMLHttpRequest を URL からデータを取得するより簡単な方法に置き換えました。この場合:

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

また、すべての最新ブラウザはファイルシステムへの直接アクセスで実行できることを厳しく制限しているため、 は使用しないようにしてくださいfile:///。たとえ「ローカルで作業しているだけ」の場合でも、使用できる軽量 Web サーバーが多数あります ( や を実行するものなどpython -m http.server) npx http-server。そのため、通常の http URL を使用してデータを読み込むことができます。

元の回答

ステータス 0 をチェックする必要があります ( でローカルにファイルをロードする場合XMLHttpRequest、 からのものではないため、ステータスは返されませんWebserver)

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

おすすめ記事