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

371

ファイルのパスを受け取り、テキストの各行を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();
}

ここで何が問題になっていますか？

これは、以前のリビジョンからコードを少し変更した後でも機能しないようですが、今ではXMLHttpRequest例外101が発生します。

私はこれをFirefoxでテストしましたが動作しますが、Google Chromeでは動作せず、例外101が発生し続けます。Firefoxだけでなく、他のブラウザー（特にChrome）でも動作させるにはどうすればよいですか。 ）？

javascript  file-io  xmlhttprequest 
— ダニー
ソース
具体的に何が起こっているのか。配列には何もありませんか？または単に「間違った」もの..？
— PinkElephantsOnParade 2013年
ローカルマシンでテストしていますか？以下のためにテストすることを確認しますstatusの0と同様に200。
— Jeffrey Sweeney
1
@JeffreySweeneyはい、私はこれをローカルマシンでテストしています。テキストファイルをjavascriptsおよびhtmlと同じ場所に保存しました
— Danny

回答:

311

ステータス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;
                alert(allText);
            }
        }
    }
    rawFile.send(null);
}

そしてfile://あなたのファイル名で指定してください：

readTextFile("file:///C:/your/path/to/file.txt");
— マジッド・ライシ
ソース
2
私は実際にはMacでこれに取り組んでいるので、まだfile：// ??を指定していますか？
— Danny
11
配置しようfile:///User/Danny/Desktop/javascriptWork/testing.txt..ブラウザのURLバーに、あなたがファイルを見ることができるかどうか
— マジッドLaissi
21
絶対パスである必要はありません。これは私にとってはうまくいきました：readTextFile（ 'Properties / version.txt'）; ありがとう！
— Sonic Soul
2
Webサーバーから読み取るため、asyncをに設定する必要がありtrueます。これが単純なlocal検索の場合は、asyncをに設定してfalseも問題onreadystatechangeありませんが、falseに設定されている間は必要ありません。ここにドキュメントがあります：w3schools.com/ajax/ajax_xmlhttprequest_send.asp
— rambossa '16
149
これはChromeでは機能しません（他のブラウザーでも可能）、「クロスオリジンリクエストはプロトコルスキームでのみサポートされています：http、data、chrome、chrome-extension、https、chrome-extension-resource」。
— Rick Burgess
102

Javascriptureにアクセスしてください！そして、セクションreadAsTextに行って、例を試してください。FileReaderのreadAsText関数がどのように機能するかを知ることができます。

    <html>
    <head>
    <script>
      var openFile = function(event) {
        var input = event.target;

        var reader = new FileReader();
        reader.onload = function(){
          var text = reader.result;
          var node = document.getElementById('output');
          node.innerText = text;
          console.log(reader.result.substring(0, 200));
        };
        reader.readAsText(input.files[0]);
      };
    </script>
    </head>
    <body>
    <input type='file' accept='text/plain' onchange='openFile(event)'><br>
    <div id='output'>
    ...
    </div>
    </body>
    </html>
— アミット・チャウラシア
ソース
14
リンクは適切ですが、「重要なリンクの最も関連性の高い部分を必ず引用してください。ターゲットサイトにアクセスできない場合や、完全にオフラインになる場合があります。」参照してください。私は良い答えを書くにはどうすればよいです。
— 4ae1e1 2015年
16
この例ではユーザー入力のテキストファイルを扱いますが、問題はサーバーのローカルファイルに関するものだったと思います。
— S.カービー
@ S.Kirby OPがローカルで実行されているのか、リモートサーバーで実行されているのかという質問に対する回答で述べたように、すべてローカルです。すべて1つのフォルダーに他に何もありません。。その上、他の人（私のような）がローカルでそれを行う方法について質問をするかもしれません。
— Simon Forsberg、
102

JavaScript でfetch apiを導入した後、ファイルの内容を読み取るのが簡単になることはありませんでした。

テキストファイルを読み取る

fetch('file.txt')
  .then(response => response.text())
  .then(text => console.log(text))
  // outputs the content of the text file

jsonファイルの読み取り

fetch('file.json')
  .then(response => response.json())
  .then(jsonResponse => console.log(jsonResponse))     
   // outputs a javascript object from the parsed json

2018年7月30日更新（免責事項）：

この手法はFirefoxでは正常に機能しますが、Chromeのfetch実装ではfile:///、この更新の作成日（Chrome 68でテスト済み）のURLスキームがサポートされていないようです。

Update-2（免責事項）：

この手法は、Chromeと同じ（セキュリティ）理由のため、バージョン68（2019年7月9日）以上のFirefoxでは機能しませんCORS request not HTTP。https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttpを参照してください。

— アブデラジズ・モクナチェ
ソース
4
鮮やかさ！Fetch標準を引用すると、「URLスキーム、リダイレクト、クロスオリジンセマンティクス、CSP、サービスワーカー、混合コンテンツReferer」の一貫した処理が提供されます。これは良いol'FileReadersとHttpRequestsに別れを告げることを意味していると思います（そして私はそれらを少し見逃しません;）
— Armfoot
1
しかし、どのようにしてテキストを使用し、それを他の場所で使用するために文字列変数に入れることができますか？（私はそれをどうしても「未定義」になり続けます。）
— not2qubit
2
@ not2qubitテキストファイルのフェッチは非同期操作です。ファイルが完全に読み取られる前に変数を使用しているため、未定義になります。promiseコールバック内で使用するか、javascriptの「async await」演算子などを使用する必要があります。
— Abdelaziz Mokhnache
13
Fetch API cannot load file:///C:/Users/path/to/file/file.txt. URL scheme must be "http" or "https" for CORS request.
— Jacob Schneider
1
— サム・マーフィー
39 

var input = document.getElementById("myFile");
var output = document.getElementById("output");


input.addEventListener("change", function () {
  if (this.files && this.files[0]) {
    var myFile = this.files[0];
    var reader = new FileReader();
    
    reader.addEventListener('load', function (e) {
      output.textContent = e.target.result;
    });
    
    reader.readAsBinaryString(myFile);
  }   
});
<input type="file" id="myFile">
<hr>
<textarea style="width:500px;height: 400px" id="output"></textarea>
スニペットを展開

— プーナチャンダーK
ソース
9
これでこの4年前の質問に対する答えがわかりません。OPはドキュメントをアップロードしていません。同じディレクトリにあるテキストファイルをパスから読み取ろうとしています。そして、もしあなたがこの古い質問に答えるつもりなら、少なくともあなたの答えが他の人より優れていると思う理由、または新しい答えを保証する質問以来言語がどのように変わったかについての短い要約を書いてください。
— Matthew Ciaramitaro
1
私自身の既存のファイルアップロード入力htmlを使用しvar reader = new FileReader();てreader.readAsBinaryString(..)- から行をコピー-それは私のテキストファイルの内容を読み取ります。クリーンでエレガント、チャームのように機能します。このスレッドでのベストアンサー-ありがとう！
— Gene Bo
18

ジョン・ペリーマン、

はい、jsはローカルファイルを読み取ることができますが（FileReader（）を参照）、自動的にはできません。ユーザーは、ファイルまたはファイルのリストをhtmlを使用してスクリプトに渡す必要があります。 <input type=file>。

次に、jsを使用して、ファイルまたはファイルのリスト、それらのプロパティの一部、およびファイルのコンテンツを処理する（例のビュー）ことができます。

jsがセキュリティ上の理由で実行できないことは、彼のコンピューターのファイルシステムに（ユーザー入力なしで）自動的にアクセスすることです。

jsがローカルfsに自動的にアクセスできるようにするには、内部にjsがあるhtmlファイルではなく、htaドキュメントを作成する必要があります。

htaファイルには、jsまたはvbsを含めることができます。

ただし、hta実行可能ファイルはWindowsシステムでのみ機能します。

これはブラウザの標準的な動作です。

また、google chromeはfs apiで動作しました。詳細はこちら：http : //www.html5rocks.com/en/tutorials/file/filesystem/

— すずめ
ソース
これは私が探していたコメントです。誰もがファイルのユーザーエントリのコードを入力タグとして配置していますが、問題は、ユーザーがコードで言及したパスからファイルを自動的に取得することです。ありがとう！
— Kumar Kartikeya
13

おそらくあなたはすでにそれを試して、次のように「false」と入力します：

 rawFile.open("GET", file, false);
— Momen
ソース
12

2つの関数を作成してみてください。

function getData(){       //this will read file and send information to other function
       var xmlhttp;

       if (window.XMLHttpRequest) {
           xmlhttp = new XMLHttpRequest();               
       }           
       else {               
           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");               
       }

       xmlhttp.onreadystatechange = function () {               
           if (xmlhttp.readyState == 4) {                   
             var lines = xmlhttp.responseText;    //*here we get all lines from text file*

             intoArray(lines);     *//here we call function with parameter "lines*"                   
           }               
       }

       xmlhttp.open("GET", "motsim1.txt", true);
       xmlhttp.send();    
}

function intoArray (lines) {
   // splitting all text data into array "\n" is splitting data from each new line
   //and saving each new line as each element*

   var lineArr = lines.split('\n'); 

   //just to check if it works output lineArr[index] as below
   document.write(lineArr[2]);         
   document.write(lineArr[3]);
}
— モチムマンスール
ソース
どのブラウザでこれが機能するか（6人が試したようです:
— Xan-Kun Clark-Davis
11

他の例-FileReaderクラスを持つ私のリーダー

<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
    </head>
    <body>
        <script>
            function PreviewText() {
            var oFReader = new FileReader();
            oFReader.readAsDataURL(document.getElementById("uploadText").files[0]);
            oFReader.onload = function (oFREvent) {
                document.getElementById("uploadTextValue").value = oFREvent.target.result; 
                document.getElementById("obj").data = oFREvent.target.result;
            };
        };
        jQuery(document).ready(function(){
            $('#viewSource').click(function ()
            {
                var text = $('#uploadTextValue').val();
                alert(text);
                //here ajax
            });
        });
        </script>
        <object width="100%" height="400" data="" id="obj"></object>
        <div>
            <input type="hidden" id="uploadTextValue" name="uploadTextValue" value="" />
            <input id="uploadText" style="width:120px" type="file" size="10"  onchange="PreviewText();" />
        </div>
        <a href="#" id="viewSource">Source file</a>
    </body>
</html>
— ウェブスカイ
ソース
2
ファイルリターンbase64出力
— VP
6

Fetchおよびasync関数の使用

const logFileText = async file => {
    const response = await fetch(file)
    const text = await response.text()
    console.log(text)
}

logFileText('file.txt')
— barro32
ソース
7
「CORSリクエストの場合、URLスキームは「http」または「https」である必要があります。」
— Qwerty、
ありがとう、私のために働きます！
— oscarAguayo
5

これは役立つかもしれません、 

    var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            alert(xmlhttp.responseText);
        }
    }

    xmlhttp.open("GET", "sample.txt", true);
    xmlhttp.send();
— サメーラR.
ソース
5

最新のソリューション：

<input type="file" onchange="this.files[0].text().then(t => console.log(t))">

ユーザーがその入力を介してテキストファイルをアップロードすると、コンソールに記録されます。これが動作するjsbinデモです。

これはより詳細なバージョンです。

<input type="file" onchange="loadFile(this.files[0])">
<script>
  async function loadFile(file) {
    let text = await file.text();
    console.log(text);
  }
</script>

現在（2020年1月）、これはChromeとFirefoxでのみ機能します。今後これを読む場合は、互換性についてこちらを確認してください。https：//developer.mozilla.org/en-US/docs/Web/API/Blob/text

古いブラウザでは、これは動作するはずです：

<input type="file" onchange="loadFile(this.files[0])">
<script>
  async function loadFile(file) {
    let text = await (new Response(file)).text();
    console.log(text);
  }
</script>
— ジョー
ソース
2

上記のいくつかの回答に加えて、この修正されたソリューションは私にとってうまくいきました。

<input id="file-upload-input" type="file" class="form-control" accept="*" />

....

let fileInput  = document.getElementById('file-upload-input');
let files = fileInput.files;

//Use createObjectURL, this should address any CORS issues.
let filePath = URL.createObjectURL(files[0]);

....

function readTextFile(filePath){
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", filePath , true);
    rawFile.send(null);

    rawFile.onreadystatechange = function (){
        if(rawFile.readyState === 4){
            if(rawFile.status === 200 || rawFile.status == 0){
                var allText = rawFile.responseText;
                console.log(allText);
            }
        }
    }     
}
— ファビイ
ソース
2 
function readTextFile(file) {
    var rawFile = new XMLHttpRequest(); // XMLHttpRequest (often abbreviated as XHR) is a browser object accessible in JavaScript that provides data in XML, JSON, but also HTML format, or even a simple text using HTTP requests.
    rawFile.open("GET", file, false); // open with method GET the file with the link file ,  false (synchronous)
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4) // readyState = 4: request finished and response is ready
        {
            if(rawFile.status === 200) // status 200: "OK"
            {
                var allText = rawFile.responseText; //  Returns the response data as a string
                console.log(allText); // display text on the console
            }
        }
    }
    rawFile.send(null); //Sends the request to the server Used for GET requests with param null
}

readTextFile("text.txt"); //<= Call function ===== don't need "file:///..." just the path

-javascriptからファイルテキストを読み取る-javascript
を使用してファイルからコンソールログテキスト
-

私の場合、Google chromeとmozilla firefox私はこのファイル構造を持っています：ここに画像の説明を入力してください

console.logの結果：
ここに画像の説明を入力してください

— ナディールハミドゥ
ソース
以下はエラーの表示です： 'file：/// C：/ {myLocalPath} PropertiesFile.txt'のXMLHttpRequestへのアクセス
— Kumar Kartikeya
1 
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {            
                $.ajax({`enter code here`
                    url: "TextFile.txt",
                    dataType: "text",
                    success: function (data) {                 
                            var text = $('#newCheckText').val();
                            var str = data;
                            var str_array = str.split('\n');
                            for (var i = 0; i < str_array.length; i++) {
                                // Trim the excess whitespace.
                                str_array[i] = str_array[i].replace(/^\s*/, "").replace(/\s*$/, "");
                                // Add additional code here, such as:
                                alert(str_array[i]);
                                $('#checkboxes').append('<input type="checkbox"  class="checkBoxClass" /> ' + str_array[i] + '<br />');
                            }
                    }                   
                });
                $("#ckbCheckAll").click(function () {
                    $(".checkBoxClass").prop('checked', $(this).prop('checked'));
                });
        });
    </script>
</head>
<body>
    <div id="checkboxes">
        <input type="checkbox" id="ckbCheckAll" class="checkBoxClass"/> Select All<br />        
    </div>
</body>
</html>
— adithya
ソース
1

js（data.js）ロードでローカルファイルデータを取得します。

function loadMyFile(){
    console.log("ut:"+unixTimeSec());
    loadScript("data.js?"+unixTimeSec(), loadParse);
}
function loadParse(){
    var mA_=mSdata.split("\n");
    console.log(mA_.length);
}
function loadScript(url, callback){

    var script = document.createElement("script")
    script.type = "text/javascript";

    if (script.readyState){  //IE
        script.onreadystatechange = function(){
            if (script.readyState == "loaded" ||
                    script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        };
    } else {  //Others
        script.onload = function(){
            callback();
        };
    }

    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}
function hereDoc(f) {
  return f.toString().
      replace(/^[^\/]+\/\*![^\r\n]*[\r\n]*/, "").
      replace(/[\r\n][^\r\n]*\*\/[^\/]+$/, "");
}
function unixTimeSec(){
    return Math.round( (new Date()).getTime()/1000);
}

次のようなdata.jsのファイル：

var mSdata = hereDoc(function() {/*!
17,399
1237,399
BLAHBLAH
BLAHBLAH
155,82
194,376
*/});

動的なunixTime queryStringはキャッシュを防ぎます。

AJはWeb http：//で動作します。

— ロベガ
ソース
ES6テンプレートのリテラル構文を複数行の文字列に使用しないのはなぜですか？（見る developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…を）
— Sapphire_Brick
1

same-origin-policyのため、ChromeでのローカルAJAX呼び出しはサポートされていません。

Chromeのエラーメッセージは次のとおりです。「クロスオリジンリクエストはプロトコルスキームではサポートされていません：http、data、chrome、chrome-extension、https。」

これは、http / httpsプロトコルを使用してドメインが提供するファイルを保持するために、Chromeがすべてのドメインの仮想ディスクを作成することを意味します。この仮想ディスクの外部にあるファイルへのアクセスは、同じ生成元ポリシーの下で制限されます。AJAX要求と応答はhttp / httpsで発生するため、ローカルファイルでは機能しません。

Firefoxはそのような制限を設けていないため、コードはFirefoxでも問題なく動作します。ただし、Chromeにも回避策があります。こちらを参照してください。

— Sushant T
ソース
0

私のライブラリをインポートできます： 

<script src="https://www.editeyusercontent.com/preview/1c_hhRGD3bhwOtWwfBD8QofW9rD3T1kbe/code.js?pe=yikuansun2015@gmail.com"></script>
スニペットを展開

次に、関数fetchfile(path)はアップロードされたファイルを返します 

<script src="https://www.editeyusercontent.com/preview/1c_hhRGD3bhwOtWwfBD8QofW9rD3T1kbe/code.js"></script>
<script>console.log(fetchfile("file.txt"))</script>
スニペットを展開

注：Google Chromeでは、HTMLコードがローカルの場合、エラーが表示されますが、HTMLコードとファイルをオンラインで保存してから、オンラインHTMLファイルを実行すると機能します。

0

JavaScriptchrome を使用してローカルファイルのテキストを読み取るには、--allow-file-access-from-filesJavaScriptがローカルファイルにアクセスできるように引数を指定してchromeブラウザを実行する必要があります。次にXmlHttpRequest、次のように使用して読み取ることができます。

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
   if (xmlhttp.readyState == 4) {
       var allText = xmlhttp.responseText;          
            }
        };
xmlhttp.open("GET", file, false);
xmlhttp.send(null);
— アリ・エザット・オデ
ソース
0

ローカルファイルを読み取る方法

これを使用すると、loadText（）によってファイルをロードし、JSは非同期でファイルが読み取られてロードされるまで待機します。その後、readText（）関数が実行され、通常のJSロジックを続行できます（トライキャッチを作成することもできます）エラーが発生した場合に備えてloadText（）関数をブロックします）が、この例では最小限に抑えます。

async function loadText(url) {
    text = await fetch(url);
    //awaits for text.text() prop 
    //and then sends it to readText()
    readText(await text.text());
}

function readText(text){
    //here you can continue with your JS normal logic
    console.log(text);
}

loadText('test.txt');
— D.Snap
ソース
function-itisの
— Sapphire_Brick
0

私はこのパーティーに遅れています。私が持っているものをお見せしましょう。

これはテキストファイルの単純な読み取りです

var path = C:\\established-titles\\orders\\shopify-orders.txt
var fs = require('fs')
fs.readFile(path , 'utf8', function(err, data) {
  if (err) throw err;
  console.log('OK: ' + filename);
  console.log(data)
});

これがお役に立てば幸いです。

— アルジョン・ヤマロ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.