2017-04-05 2 views
0

私は次のコードを使用してテキストファイルを選択し、その内容を下のPREタグにロードします。 テキストファイルの内容を10秒ごとにリロードする

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
    <head> 
 
    <title>Load text file</title> 
 
    <script type="text/javascript"> 
 
\t \t function readText(that){ 
 
\t \t \t if(that.files && that.files[0]){ 
 
\t \t \t \t var reader = new FileReader(); 
 
\t \t \t \t reader.onload = function (e) { 
 
\t \t \t \t \t var contents = e.target.result;//.replace("\r\n","<br/>"); 
 
\t \t \t \t \t contents = contents.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;'); 
 
\t \t \t \t \t document.getElementById('board').innerHTML= contents; 
 
\t \t \t \t };//end onload() 
 
\t \t \t \t reader.readAsText(that.files[0]); 
 
\t \t \t }//end if html5 filelist support 
 
\t \t } 
 
    </script> 
 
    </head> 
 
    <body> 
 

 
<input type="file" onchange='readText(this)' /> <hr /> 
 

 
<pre id="board" contenteditable = "true"> 
 
This is where the text from the chosen text file will be loaded. 
 
</pre> 
 

 
</body> 
 
</html>

は、それが10秒ごとに選択したファイルの内容を読み取ることは可能ですか?

たとえば、ユーザーはテキストファイルを選択します(1回)。 その後、コードは内容をループして読み込み、テキストファイルに加えられた変更をPREタグに更新します。

私はローカルで作業していますので、どのサーバースクリプトも使用できません。

解決策にSETINERTIALが含まれている可能性がありますか?

ありがとうございました。

+0

setIntervalだけではないのはなぜですか? –

+0

あなたはそれを動作させることができますか? – jmcall10

+1

アップロードされたファイルの内容を変更した場合に更新された内容を取得するために、アップロードされたファイルの内容を10秒ごとに再読み込みしますか? –

答えて

0

あなたは

// A variable to store the id of the setInterval method 
var currentIntervalId = undefined; 
// The function that calls your method. 
var startOrRestart = function(that) { 
    // Clear the 'old' calls to avoid wrong behavior 
    if (currentIntervalId !== undefined) clearInterval(currentIntervalId); 
    readText(that); // For executing immediately 
    // Execute it readText each 10 seconds 
    currentIntervalId = setInterval(function() { readText(that); }, 10000); 
}; 

を使用することができますし、あなたのinputタグであなたは、このソリューションのアイデアは、一度、各10の後に、あなたのREADTEXT(その)機能を実行することである

<input type="file" onchange='startOrRestart(this)' /> 

を呼び出します秒(のsetInverval関数関数の助けを借りて)。ただし、テキストが変更された場合は、のsetInterval関数が再度実行されます。ですから、あなたは古い入力を処理する古いトリガーを持っています。あなたは新しい入力のための新しい「引き金」を持っています。このような望ましくない動作を避けるために、トリガーのIDを格納し、設定されている場合はトリガーを強制終了します。

+0

こんにちは、ありがとうございました。しかし、私はこのコードを動作させることができません。あなたはもう少し援助を提供することができますか?ありがとう – jmcall10

+0

スクリプトタグにJavaScriptを入れてください。さらに、_onchange = 'readText(this)' _を_onchange = 'startOrRestart(this)' _に切り替えます。故障出力はありますか? – Guybrush

+0

最初は体内に新しいスクリプトタグを作成しましたが、オリジナルのスクリプトタグにJSを貼り付けてonchangeを変更しました。これはクロムでは動作しますが、IEやFFでは動作しません。 – jmcall10

関連する問題