ローカルテキストファイルを配列リストに読み込む方法Javascript

テキストファイルの内容を画面に表示するはずの小さなhtmlファイルがあります。テキスト（values.txt）は、htmlファイルと同じファイルにあります。内容を読み込むと、アラートに表示されないため、値が取得されないように見えます。ここローカルテキストファイルを配列リストに読み込む方法Javascript

はコード

<html> 
<head> 
<!--<input type="file" id="fileinput" />--> 
<script type="text/javascript"> 

    function readSingleFile(file) { 
    var f = new File([""], "filename.txt", {type: "text/plain"}) 
    if (f) { 
     var r = new FileReader(); 
     r.onload = function(e) { 
      var contents = e.target.result;    
      var ct = r.result; 
      var words = ct.split(' ');    
      alert(words[0] + 'test'); //this alert goes off but no values from words[0] are displayed 
     } 
     r.readAsText(f); 
    } else { 
     alert("Failed to load file"); 
    } 
    } 

    //readSingleFile('values.txt'); 
</script> 
</head> 
<body onload="readSingleFile('values.txt')"> 
</body> 
</html>

私は何ができるのリストにテキストファイルを読むために/このコードスニペットは、仕事を得るのですか？

出典

2017-02-08 Marc Frame

を呼び出しについて

あなたはより多くを読むことができますか？私は 'e.target.result'があなたが期待している結果を返すとは思わない。 –

それは価値がありません。私は、HTML入力タグからの入力で作業したコードをコピーしようとしましたが、それを編集してしまいました –

主な問題は、まず関数のためにファイルを取得する必要があることです。引数としてファイルの名前を渡すだけでは不十分です。

また、onload属性を持つbodyの代わりにtypeファイルの入力を使用する方が良いでしょう。

コードをリファクタリングして動作させました。

1.これをあなたのHtmlで使用し、body onload属性を削除します。

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

外部JSファイルにこの機能を追加したり、HTMLファイル内のスクリプトタグの間でそれをラップ

。

 

    function readSingleFile(evt) { 
    var f = evt.target.files[0]; 
    if (f) { 
    var r = new FileReader(); 
     r.onload = function(e) { 
     var contents = e.target.result; 
     alert("Got the file.n" 
     +"name: " + f.name + "n" 
     +"type: " + f.type + "n" 
     +"size: " + f.size + " bytesn" 
     + "starts with: " + contents.substr(1, contents.indexOf("n")) 
     ); 
     } 
     r.readAsText(f); 
    } else { 
     alert("Failed to load file"); 
    } 
    } 
    // this parts gets the file and keeps an eye for changes 
    document.getElementById('inp').addEventListener('change', readSingleFile,false);

は、私はあなたがこれが役に立つかもしれません願っています。

出典

2017-02-08 15:24:11 Antonio682

残念ながら、あなたのアプローチでもうまくいきませんでした。 Antonio682が示唆したように、input -fieldでそれを行う方が良いでしょうが、あなたはAJAX呼び出しでそれを試してみてくださいaswellことがあります。

<html> 
<head> 
<!--<input type="file" id="fileinput" />--> 
<script type="text/javascript"> 

     function readSingleFile(file) { 
     var objXMLhttp = new XMLHttpRequest() 
     objXMLhttp.open("GET", file, true); 
     objXMLhttp.send(); 
     objXMLhttp.onreadystatechange = function(){ 
       if (objXMLhttp.readyState == 4){ 
       if(objXMLhttp.status == 200) { 
        var arrContents = objXMLhttp.responseText.split("\n"); 
        console.log(arrContents); 
       } else { 
        console.log("error"); 
       } 
      } 
     } 
     } 
</script> 
</head> 
<body onload="readSingleFile('values.txt')"> 
</body> 
</html>

あなたはFirefoxでそれをテストすることをお勧めします、のchromeセキュリティ以来設定ではファイルプロトコル要求が許可されません。 AJAXを使用すると、コンテンツの価値を確認しましたhere

出典

2017-02-08 15:42:57 InsOp

ローカルテキストファイルを配列リストに読み込む方法Javascript

答えて

関連する問題