次の行を含むfoo.txtファイルがあります。
row1
row2
row3
このファイルへのリンクをHTMLで作成し、クライアント側でJavascriptを使用して読み取りたいと思います。これに対する解決策はありますか?
次の行を含むfoo.txtファイルがあります。
row1
row2
row3
このファイルへのリンクをHTMLで作成し、クライアント側でJavascriptを使用して読み取りたいと思います。これに対する解決策はありますか?
ファイルがサーバー上にある場合は、次を使用できます。
jQuery.get('your_file.txt',function(data){
alert(data);
});
ローカルシステムからプルインする場合は、最初にアップロードメカニズムを設定する必要があります。
アップデート:
同期して実行します。
$.ajax({
url: "your_file.txt",
async: false,
success: function(data){ alert(data); }
});
自分のサーバー上にないファイル:
これは、セキュリティ上の理由から、クライアント側のJavaScriptでは不可能です。クライアントのファイルシステムにアクセスしようとしていると想像してください。
Internet Explorerにはファイルシステムオブジェクトのオプションがありますが、それでも、害を及ぼす目的がない限り、クライアントマシンでI/Oを実行することはお勧めできません。
サーバー上のファイル:
ただし、自分のドメイン/スペースからファイルを読み取る場合は、@Fluidbyteが指摘したようにAJAXを使用できます。
それをサポートするブラウザでhtml5のファイルAPIを使用することもできます。
サポートされているブラウザにはFileAPIを使用できます。
そうでない場合は、従来の「サーバーへのアップロードとサーバーからの読み取り」アプローチを使用します。これはAJAXでも実行できます。
ファイルは行であるため、クライアントブラウザのHTML5 Localstorageに保存することをお勧めします。これは、次のように単純なループで保存できます。
localStorage.setItem("key1", "value1");
localStorage["key1"] = "value1";
...
行ごとに読み取り、JavaScriptコードを出力するサーバーサイドスクリプトを記述します。
その後、それを読むには、単に次のことを行う必要があります。
function listAllItems(){
for (i=0; i<=localStorage.length-1; i++)
{
key = localStorage.key(i);
val = localStorage.getItem(key);
}
}
通常、各Webサイトには5MBのローカルストレージスペースがあります。Localstorageを更新する関数を記述して、それに何かを追加し、必要に応じてサーバーに送り返すことができます。
var oFReader = new FileReader();
oFReader.readAsText(document.getElementById("fileImportOrExport").files[0]);
oFReader.onload = function (oFREvent) {
var fileImportOrExportContent = oFREvent.target.result;
}
oFReader.onerror = function (OFREvent) {
alert("Error in reading");
}