Javascript 使用Javascript读取客户端文本文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4950567/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Reading client side text file using Javascript
提问by y2p
I want to read a file (on the client side) and get the content in an array. It will be just one file. I have the following and it doesn't work. 'query_list'is a textarea where I want to display the content of the file.
我想读取一个文件（在客户端）并获取数组中的内容。这将只是一个文件。我有以下内容，但它不起作用。'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>
How should I go about it? Eventually I want to loop over the array and run some SQL queries.
我该怎么办？最终我想遍历数组并运行一些 SQL 查询。
回答by Juan Mendes
If you want to read files on the client using HTML5's FileReader, you must use Firefox, Chrome or IE 10+. If that is true, the following example reads a text file on the client.
如果要使用HTML5 的 FileReader读取客户端上的文件，则必须使用 Firefox、Chrome 或 IE 10+。如果是这样，下面的示例将读取客户端上的文本文件。
your example attempts to use fopen that I have never heard of (on the client)
您的示例尝试使用我从未听说过的 fopen（在客户端上）
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)
}
For IE<10 support you need to look into using an ActiveX Object like ADO.Stream Scripting.FileSystemObject http://msdn.microsoft.com/en-us/library/2z9ffy99(v=vs.85).aspxbut you'll run into a security problem. If you run IE allowing all ActiveX objects (for your website), it should work.
对于 IE<10 支持，您需要考虑使用 ActiveX 对象，例如 ADO.Stream Scripting.FileSystemObject http://msdn.microsoft.com/en-us/library/2z9ffy99(v=vs.85).aspx但您会遇到安全问题。如果您运行 IE 允许所有 ActiveX 对象（对于您的网站），它应该可以工作。
回答by Anton Purin
There is such thing as HTML5 File APIto access local files picked by user, without uploading them anywhere.
有HTML5 File API 之类的东西可以访问用户选择的本地文件，而无需将它们上传到任何地方。
It is quite new feature, but supported by most of modern browsers.
这是一个相当新的功能，但被大多数现代浏览器支持。
I strongly recommend to check out this great articleto see, how you can use it.
我强烈建议您查看这篇很棒的文章，了解如何使用它。
There is one problem with this, you can't read big files(~400 MB and larger) because straight forward FileAPI functions attempting to load entire file into memory.
这有一个问题，您无法读取大文件（~400 MB 或更大），因为直接的 FileAPI 函数试图将整个文件加载到内存中。
If you need to read big files, or search something there, or navigate by line index check my LineNavigator, which allows you to read, navigate and search in files of any size. Try it in jsFiddle!It is super easy to use:
如果您需要阅读大文件，或在那里搜索某些内容，或按行索引导航，请检查我的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);
});
回答by mwilcox
Well I got beat to the answer but its different:
好吧，我得到了答案，但它不同：
<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");
}
This will work in FF 3.5 - 3.6, and that's it. FF 4 and WebKit you need to use the FileReader as mentioned by Juan Mendes.
这将适用于 FF 3.5 - 3.6，仅此而已。FF 4 和 WebKit 您需要使用 Juan Mendes 提到的 FileReader。
For IE you may find a Flash solution.
对于 IE，您可能会找到 Flash 解决方案。
回答by brettcvz
I work there, but still wanted to contribute because it works well: You can use the filepicker.io read apito do exactly this. You can pass in an dom element and get the contents back, for text or binary data, even in IE8+
我在那里工作，但仍然想做出贡献，因为它运行良好：您可以使用filepicker.io read api来做到这一点。您可以传入一个 dom 元素并取回内容，对于文本或二进制数据，即使在 IE8+ 中
