使用JavaScript读取客户端文本文件

Question

我想从客户端读取一个文件并将其内容存储到数组中。只有一个文件。我尝试了以下代码，但它没有起作用。'query_list'是一个文本区域，我想在其中显示文件的内容。

<input type="file" id="file" name="file" enctype="multipart/form-data"/>
        
<script>
    document.getElementById('file').addEventListener('change', readFile, false);
    
    function readFile (evt) {
        var files = evt.target.files;
        var file = files[0];
                                                                                                           
        var fh = fopen(file, 0);
        var str = "";
        document.getElementById('query_list').textContent = str;
        if(fh!=-1) {
            length = flength(fh);        
            str = fread(fh, length);     
            fclose(fh);                   
        } 
        document.getElementById('query_list').textContent = str;
    }
</script>

我该如何处理？最终我想循环遍历数组并运行一些SQL查询。

- y2p

---

在此规范中有一个名为getAsText的函数，它恰好可以实现您尝试做的事情。 - Josiah Ruddell

等一下 - SQL 查询？客户端？？ - mwilcox

Answer 1

您可以使用HTML5的FileReader在客户端上读取文件。以下示例演示如何在客户端上读取文本文件。

您的示例尝试使用fopen，但这在Javascript中不可用。

http://jsfiddle.net/k3j48zmt/

document.getElementById('file').addEventListener('change', readFile, false);

function readFile(evt) {
  var files = evt.target.files;
  var file = files[0];
  var reader = new FileReader();
  reader.onload = function(event) {
    console.log(event.target.result);
  }
  reader.readAsText(file)
}

<input id=file type=file />

- Ruan Mendes

---

我想获取文本文件中的文本并将其附加到我的可编辑div中，这可行吗？ - extraRice

根据微软的这个页面(http://msdn.microsoft.com/en-us/library/ie/hh673542(v=vs.85).aspx)，这种方法也适用于IE10及更高版本。 - MBielski

Answer 2

有一种名为HTML5 FileReader API的东西，可以访问用户选择的本地文件，而无需将其上传到任何地方。这是一个相当新的功能，但大多数现代浏览器都支持。我强烈建议您查看这篇精彩的文章，了解如何使用它。

不过，这里有一个问题，你无法读取大文件（约400 MB或更大），因为直接的FileAPI函数会尝试将整个文件加载到内存中。

如果您需要读取大文件，或者在其中搜索某些内容，或者按行索引导航，请查看我的LineNavigator，它允许您读取、导航和搜索任意大小的文件。在jsFiddle上试用一下吧！ 它非常容易使用：

var navigator = new FileNavigator(file);    

navigator.readSomeLines(0, function linesReadHandler(err, index, lines, eof, progress) {    
    // Some error
    if (err) return;
    
    // Process this line bucket
    for (var i = 0; i < lines.length; i++) {
        var line = lines[i]; 
        // Do something with it
    }
    
    // End of file
    if (eof) return;
    
    // Continue reading
    navigator.readSomeLines(index + lines.length, linesReadHandler);
});

- Anton

---

距离上次更新已经有6年了，但这个库仍然像梦一样运行。如果我有机会的话，我请你喝啤酒。这是一个很棒的库，完全满足了我的需求，而且易于使用。说实话，它应该成为本地HTML5文件规范的一部分。 - Llama D'Attore

Answer 3

好吧，我被打败了，但我的答案不同：

<input type="file" id="fi" />
<button onclick="handleFile(); return false;">click</button>

function handleFile() {
    var preview = document.getElementById('prv')
    var file = document.getElementById('fi').files[0];
    var div = document.body.appendChild(document.createElement("div"));
    div.innerHTML = file.getAsText("utf-8");
}

这将在FF 3.5 - 3.6中工作，仅限于此。对于FF 4和WebKit，您需要使用Juan Mendes提到的FileReader。

对于IE，您可以找到一个Flash解决方案。

- mwilcox

---

已弃用 - https://developer.mozilla.org/zh-CN/docs/Web/API/File/getAsText - Ruan Mendes

Answer 4

我在那里工作，但仍然想做出贡献，因为它的效果很好：您可以使用filepicker.io read api来实现这一点。您可以传入一个dom元素并获取其内容，用于文本或二进制数据，甚至在IE8+中也可以。

- brettcvz

---

这看起来不错，但你应该展示一个例子，否则它应该是一条注释。 - Ruan Mendes

更不用说你还要支付订阅费才能使用他们的API了。 - MBielski