加载和读取文本文件到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; 
     } 

它显示在<pre id="fileDisplayArea"><pre>面积您的HTML内。你希望将其存储在变量中，这样你就可以开始创建一个表，格式化，格式和拼接文本和东西（你已经知道第2部分）：

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

     }