web-dev-qa-db-ja.com

jQuery：ファイルシステムからテキストファイルを読み取る

次のように、jqueryを使用してテキストファイルを読み取ろうとしています。

// LOAD file and split line by line and append divs
$.get('myFile.txt', function(data) {    
    var lines = data.split("\n");

    $.each(lines, function(n, elem) {
       $('#myContainer').append('<div>' + elem + '</div>');
    });
});

クロムでは、私は得ています：

XMLHttpRequest cannot load file:///C:/myPath/myFile.txt. Origin null is not allowed by Access-Control-Allow-Origin.

Firefoxにはエラーは表示されませんが、コードは実行されません（firebugにブレークポイントがあり、匿名関数は実行されません）。

どんな助けも感謝します！

[〜＃〜] edit [〜＃〜]：

する必要がありました：

  • ファイルのフルパスを使用する
  • launch chrome with "--allow-file-access-from-files"

今では正常に動作しています！

jqueryfilefilesystemsget
15
JohnIdol

このように、ローカルファイルシステムからファイルをロードすることはできません。Webサーバーにファイルを配置し、そこからロードする必要があります。 JavaScriptのロード元と同じサイト上。

編集：これを見て thread 、オプション--allow-file-access-from-filesを使用してchromeを開始できます。これによりローカルファイルへのアクセスが許可されます。

15
Anders

ファイルのURLのフルパスを指定します

5
Ali Tarhini

これは少なくともFirefoxではうまく機能しています。

私が直面していた問題は、プレーンテキスト文字列の代わりにXMLオブジェクトを取得したことです。ローカルドライブからxmlファイルを読み取ることは正常に機能するので（htmlと同じディレクトリ）、テキストファイルの読み取りが問題になる理由はわかりません。

XMLオブジェクトの代わりに文字列を渡すようにjqueryに指示する必要があると考えました。それが私がやったことであり、最終的に機能しました：

function readFiles()
{
    $.get('file.txt', function(data) {
        alert(data);
    }, "text");
}

最後に「テキスト」が追加されていることに注意してください。これは、jqueryに 'file.txt'の内容をXMLオブジェクトの代わりに文字列として渡すように指示します。警告ボックスにテキストファイルの内容が表示されます。最後に「テキスト」を削除すると、警告ボックスに「XMLオブジェクト」と表示されます。

5
Eric

私が使用したこの回避策は、生データを文字列として返す関数を実装するjsファイルとしてデータを含めることでした：

html：

<!DOCTYPE html>
<html>

<head>
  <script src="script.js"></script>
  <script type="text/javascript">
    function loadData() {
      // getData() will return the string of data...
      document.getElementById('data').innerHTML = getData().replace('\n', '<br>');
    }
  </script>
</head>

<body onload='loadData()'>
  <h1>check out the data!</h1>
  <div id='data'></div>
</body>

</html>

script.js：

// function wrapper, just return the string of data (csv etc)
function getData () {
    return 'look at this line of data\n\
oh, look at this line'
}

ここで実際にそれを参照してください- http://plnkr.co/edit/EllyY7nsEjhLMIZ4clyv?p=preview 欠点は、複数行をサポートするためにファイルで前処理を行う必要があることです（文字列の各行を追加します'\n\'）。

3
noahp

これは働いています

        $.get('1.txt', function(data) {
            //var fileDom = $(data);

            var lines = data.split("\n");

            $.each(lines, function(n, elem) {
                $('#myContainer').append('<div>' + elem + '</div>');
            });
        });
3
Sreekumar P

これは機能せず、巨大なセキュリティホールになるため機能しません。

新しい File System API をご覧ください。ブラウザが管理する仮想のサンドボックス化されたファイルシステムへのアクセスをリクエストできます。ユーザーにファイルをサンドボックス化されたファイルシステムに「アップロード」するように要求する必要がありますが、その後は非常にエレガントに作業できます。

これは間違いなく未来ですが、まだ非常に実験的であり、Googleでのみ動作しますChrome CanIUse が知る限り。

2
bfncs

ファイルを動的に生成する必要がない限り（例えば、単純なテキストまたはhtmlファイル）、Webサーバーなしでローカルにテストできます-相対パスを使用するだけです。

1
exasperated

ファイル入力ボックスを含める場合、FileReaderオブジェクトを使用して、base64エンコード文字列としてファイルにアクセスできます。テキストファイルの場合、単純なbase64デコードが機能してテキストを取得します。

次のHTMLを想定：

<input type="file" id="myfile" />

次のJQuery JSを使用してアクセスできます。

var file = $('#myfile').get(0).files[0];
var reader = new FileReader();
reader.onload = function (e) {
    //get the file result, split by comma to remove the prefix, then base64 decode the contents
    var decodedText = atob(e.target.result.split(',')[1]);
    //show the file contents
    alert(decoded);
};
reader.readAsDataURL(file);
0
BlackSpy