使用javascript逐行读取本地文件答案

【问题标题】：Read local file line by line using javascript使用javascript逐行读取本地文件
【发布时间】：2015-11-13 08:13:18
【问题描述】：

我正在努力完成以下任务：

逐行读取文件
在每一行中拆分单词
创建以每个单词为一列的动态行。

我尝试了以下类似的方法，但它不起作用：

$.get('test.txt', function(myContentFile) {
    var lines = myContentFile.split("\r\n");
    var table = document.getElementById("myTableData");

    for(var i  in lines){
        var str = lines[i]
        var res = str.split(",");
        var row = table.insertRow(0);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        cell1.innerHTML = res[0];
        cell2.innerHTML = res[1];
    }

}, 'text');

【问题讨论】：

无法从浏览器会话中访问本地文件。想象一下它会有多大的安全漏洞
stackoverflow.com/questions/6923707/…
您能描述一下“它不工作”是什么意思吗？你有错误吗？你的代码会被执行吗？它只产生一半的文本吗？请具体。您是否尝试将console.log 添加到您的代码中以检查哪些代码已执行和未执行，以及某些变量的内容？

标签： javascript jquery

【解决方案1】：

确保您拥有included jQuery before your code executes，并且在您的文档中拥有具有正确id 值的table 元素，如下所示：

<table id="myTableData" border="1"><table>

还要确保您的文本文件 (text.txt) 与您的 html 页面位于同一本地文件夹中。

如果满足所有这些条件，您的代码就会运行。尽管如此，还是有一些事情要处理。查看我添加到您的代码中的更改和 cmets：

<html>
<head>
    <meta charset="UTF-8">
    <script src="http://code.jquery.com/jquery-1.9.0.js"></script>
</head>
<body>
<table id="myTableData" border=1><table>

<script type="text/javascript">
    $.get('test.txt', function(myContentFile) {
        console.log(myContentFile);
        // Added: strip ending new-lines from the retrieved text:
        myContentFile = myContentFile.replace(/[\r\n]$/, '');
        // Modified: split lines also when delimited by linefeeds only:
        var lines = myContentFile.split(/\r\n|\n/);
        var table = document.getElementById("myTableData");

        for(var i  in lines){
            var str = lines[i]
            var res = str.split(",");
            // Modified: remove argument to add rows to the end of the table
            var row = table.insertRow();
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            cell1.innerHTML = res[0];
            // Modified: test that second element exists to prevent "undefined" output
            cell2.innerHTML = res[1] ? res[1] : '';
        }
    }, 'text');
</script>
</body>
</html>

我将以下test.txt 文件放在同一个文件夹中：

This is a test, with something in second column
And a second line, that also has a second column
The third line just has one value

然后，当我在浏览器中打开 html 页面时，我得到以下输出：

| This is a test                    | with something in second column |
| And a second line                 | that also has a second column   |
| The third line just has one value |                                 |

【讨论】：

【解决方案2】：

您必须先输入<input type="file" id="myfile" />，然后才能操作您的文件。

然后使用 (jquery) 获取您的文件：

var myFile = $('#myfile').prop('files');

否则无法访问。

【讨论】：

感谢您的回复。作为概述，我将使用它作为 HTA 文件，该文件将在本地机器上运行。安全不是问题。你能指导我在哪里需要提到
@user2529462 如果您使用file:// 协议打开文件，您将无法通过 Javascript 访问文件！
@hijarian：是的，你可以。
@trincot 在 OP 使用的 $.get() 方法的上下文中，你不能。 File API 使用完全不同的方法，导致不同的 UI/UX，这可能不是 OP 需要的。
@user2529462 在这种情况下，您不能对 Web 浏览器供应商说“安全不是问题”。如果您使用file:// 协议（即从文件管理器）打开 HTML 文档，AJAX 将不起作用。