加载和读取文本文件到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. 您知道如何创建表格，格式化，格式化和拼接文本和事物

现在我们需要连接这些东西。不幸的是，现在所有脚本都在用户加载文本文件时在浏览器上显示文本。这是代码的一部分：

httpd -k restart

它显示在html的reader.onload = function(e) { fileDisplayArea.innerText = reader.result; } 区域内。您希望将其存储在变量中，因此您可以开始创建表格，格式化，格式化和拼接文本和事物（您已经知道的第2部分）：

<pre id="fileDisplayArea"><pre>