テキストファイルをHTML/JavaScriptに読み込み/読み込みする

Question

ローカルに保存されたテキストファイル（ユーザーのコンピュータに保存されていますが、ローカルディレクトリに移動される可能性があります）を読み込み、読み込みしようとしています。 HTMLでテーブルを生成します。

ユーザーがファイルを選択してアップロードする方法を見つけましたが、コードはブラウザにテキストを表示します。私はそれが私が正しい行とセルに入れることができるようにデータを操作することができるように格納したい。私はテーブルを作成し、それをフォーマットし、フォーマットし、テキストとそれに類似したものをスプライスする方法を知っています。参考のために

<div id="page-wrapper"> 

<h1>Text File Reader</h1> 
<div> 
    Select a text file: 
    <input type="file" id="fileInput"> 
</div> 
<pre id="fileDisplayArea"><pre> 

</div> 

<script> 
window.onload = function() { 
var fileInput = document.getElementById('fileInput'); 
var fileDisplayArea = document.getElementById('fileDisplayArea'); 

fileInput.addEventListener('change', function(e) { 
    var file = fileInput.files[0]; 
    var textType = /text.*/; 

    if (file.type.match(textType)) { 
     var reader = new FileReader(); 

     reader.onload = function(e) { 
      fileDisplayArea.innerText = reader.result; 
     } 

     reader.readAsText(file);  
    } else { 
     fileDisplayArea.innerText = "File not supported!" 
    } 
}); 
} 

</script> 

を次のように

私はここで見つかりましたが、それを聞いている特定の忘れていたコードは、行く、ここではテキストファイルのサンプルだと、ここで私が欲しいものです。

私はまだ比較的HTMLおよびJavaScriptに新しいが、学ぶことを熱望しています。何かが感謝されます。

Answer 1

あなたはすでに働いていくつかの部分を持っている：

1. あなたはユーザーを持ってする方法を発見したファイルを選択し、アップロード

2. をあなたがテーブルを作成する方法を知って、フォーマットには、フォーマットとスプライステキストと物語

ここでこれらのものを接続する必要があります。残念ながら、現在、すべてのスクリプトは、ユーザーがテキストファイルを読み込んだときにブラウザにテキストを表示します。

reader.onload = function(e) { 
      fileDisplayArea.innerText = reader.result; 
     } 

それはそれはあなたのhtmlの<pre id="fileDisplayArea"><pre>領域の内側に表示されます。これは、その責任のコードの一部です。これを見たではないため

reader.onload = function(e) { 
      myTextToFormat = reader.result; 
      // start formatting and make it into a table... 

     }