4

jqueryなしでjavascriptを使用して現在のディレクトリからテキストファイル（text1.txt）を読み取る方法。次のコードを試しました。

var file = "text1.txt";
var reader = new FileReader();
var result = reader.readAsText(file);
console.log(result);
4

4 に答える 4

8

FileReader APIは通常、を介して選択されたファイルを読み取るために使用されます<input type="file">。任意のファイルを読み取ることはできません。このreadAsTextメソッドは、ファイル名を含む文字列ではなく、BlobまたはFileオブジェクトで受信することを想定しています。

HTMLドキュメントの兄弟であるファイルを読み取るには、XMLHttpRequestを使用します。これは、ドキュメントをHTTP（S）経由でロードする場合に確実に機能します。（URIを介して）ローカルHTMLドキュメントを使用している場合file:、多くのブラウザのセキュリティ制限により、ドキュメントが機能しなくなります（代わりに、ローカルWebサーバーを実行する必要があります）。

于 2013-03-25T12:48:56.227 に答える
3

オプションA、ユースケースにより、httpまたはphpサーバーを使用できなくなります。 スクリプトインクルードを使用して、ローカルコンテンツを変数としてJavaScriptに含めることができます。ディレクトリからファイルとしてページをローカルで開いている場合、これがWebページにローカルコンテンツを含める唯一の方法です。

ローカルコンテンツを含めるには、これを他のスクリプトタグの上に配置します。

<script src="text1.txt"></script>

text1.txtファイルを編集して、すべてのコンテンツを変数に割り当てます。

gbl_text=`...contents of my text file...
...more contents...
...and so on....   
`

たとえば、スクリプトを使用してこのインクルードファイルを作成できます（チルダ〜キーの下にある `チェックマークを使用）：

echo -n "var gbl_text=\`" > text1.txt
cat your-original-file.txt >> text1.txt
echo "\`" >> text1.txt

次に、必要に応じてJavaScriptでgbl_text変数を使用します...

function dosomething()
{
  if (typeof(gbl_text)=='undefined'){
    setTimeout('dosomething()',500)  //call back until defined
  }else{
    console.log(gbl_text)
  }
}

オプションB、ユースケースでは、php-cli組み込みサーバーを使用できます。 php-cliを実行できる場合は、組み込みのphp Webサーバーでページを開き、php呼び出しを使用してローカルコンテンツの読み取りと書き込みを行うことができます。Linuxにphpをインストールして使用するには、

sudo apt install php7.0-cli
#To use the php built-in webserver, run:
php -S localhost:8000 -t /path/to/your/content

したがって、htmlをファイルとして開く代わりに、httpWebページとして開きます。

firefox http://localhost:8000/mypage.html
#or browser of choice

これで、ローカルWebページはphpをサポートする実際の（ローカル）httpサーバーによって提供され、ローカルファイルを操作できます。

これは、jQueryとphpを使用してローカルファイルを読み書きする方法を示す簡単な例です。jQuery（jQuery.comを参照）をダウンロードして、htmlファイルに含めます。

dofile.phpの内容：

<?php 
$dowhat  = $_REQUEST['dowhat'];
  if ($dowhat=='save'){
    $myvar = $_REQUEST['myvar'];
    file_put_contents('myfile', $myvar); 
  }elseif($dowhat=='read'){
    $myvar=file_get_contents('myfile');
    echo $myvar; 
  }
?>

mypage.htmlの内容：

<script src='jquery-3.2.1.js';></script>
<!--make sure the filename matches the jQuery you use-->

<script>
function savevar(){
  var myvar=document.getElementById('mytxt').value
  var path="dofile.php?dowhat=save&myvar="+myvar 
  $.get(path, function(data){
    console.log("saved ...\n"+myvar)
    alert("saved ...\n"+myvar)
  });
}

function clearbox(){
  document.getElementById('mytxt').value='reading file...'
  setTimeout('getvar()',1000)
}

function getvar(){
  var path="dofile.php?dowhat=read"
  $.get(path, function(data){
    console.log(data);
    document.getElementById('mytxt').value=data
    /*do other things with data here*/;
  });
}
</script>

<html>
Type something in the text box.<br>
Use the Read and Write buttons to verify <br>
text is saved and read back.<br> 
<input id='mytxt' value='type text here' onclick=document.getElementById('mytxt').value=''><br>
<input type='button' value='Save' onclick=savevar() ><input type='button' value='Read' onclick=clearbox() >

</html>
于 2018-05-20T19:31:33.067 に答える
0

2種類の読み取りファイルを区別してください。

  • 「インターネットから」の読み取り-XMLHttpRequestを使用してあらゆる種類のファイルを読み取ります
  • 「クライアントから」の読み取り-FileReaderまたは<input type="file">
于 2013-03-25T12:56:25.950 に答える
-1

小さなiframeを作成します。そこにファイルをロードします。iframe.innerHTMLで読む

于 2019-07-11T07:52:48.270 に答える