javascript：如何逐行解析 FileReader 对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15287573/
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
javascript: how to parse a FileReader object line by line
提问by fox
I have a javascript/HTML5 page that I want to use to pull in a file and check each line to see whether it is greater than 240 chars:
我有一个 javascript/HTML5 页面，我想用它来拉入文件并检查每一行以查看它是否大于 240 个字符：
EDIT: I have things parsing correctly now, but they're not rendering correctly. Here's my updated code:
编辑：我现在可以正确解析内容，但它们没有正确呈现。这是我更新的代码：
<!DOCTYPE HTML>
<html>
<head>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<input type="file" id="input" name="file" multiple />
<br>
<output id="files"></output>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
if (window.File && window.FileReader && window.FileList && window.Blob) {
// Great success! All the File APIs are supported.
} else {
alert('The File APIs are not fully supported in this browser.');
}
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// files is a FileList of File objects. List some properties.
var output = [];
for (var i = 0, f; f = files[i]; i++) {
var reader = new FileReader();
reader.onload = function(e) {
// Print the contents of the file
var text = e.target.result;
var lines = text.split(/[\r\n]+/g); // tolerate both Windows and Unix linebreaks
for(var i = 0; i < lines.length; i++) {
if (lines[i].length > 240){
output.push('<li>' + lines[i] + '<br>');
}
}
};
reader.readAsText(f,"UTF-8");
}
document.getElementById('files').innerHTML = 'Paths with more than 240 characters: <br><ul>' + output.join('') + '</ul>';
}
document.getElementById('input').addEventListener('change', handleFileSelect, false);
</script>
</body>
</html>
I can run a trace and see that the outputvariable is populating correctly, but all that I'm getting for output is: Paths with more than 240 characters:without the output.join()part rendering correctly -- any thoughts?
我可以运行跟踪并查看output变量是否正确填充，但我得到的输出是：Paths with more than 240 characters:没有output.join()正确渲染部分 - 有什么想法吗？
采纳答案by dfsq
I guess you should put
我想你应该把
document.getElementById('files').innerHTML = 'Paths with more than 240 characters: <br><ul>' + output.join('') + '</ul>';
inside onloadcallback. Seems that outputis not yet populated when you try to use it. So:
内部onload回调。output当您尝试使用它时，似乎尚未填充。所以：
reader.onload = function (e) {
// all your code ...
// now can safely print output
document.getElementById('files').innerHTML = 'Paths with more than 240 characters: <br><ul>' + output.join('') + '</ul>';
};
回答by AKX
The obvious way (if you can tolerate reading the file all at once) is to split it by newlines.
显而易见的方法（如果您可以容忍一次读取所有文件）是用换行符拆分它。
var lines = text.split(/[\r\n]+/g); // tolerate both Windows and Unix linebreaks
for(var i = 0; i < lines.length; i++) { /* do something with lines[i] */ }
// or in modern JavaScript,
lines.forEach(function(line) { /* ... */ });
