javascript：如何逐行解析FileReader对象_Javascript_Html

javascript：如何逐行解析FileReader对象

javascript html

javascript：如何逐行解析FileReader对象,javascript,html,Javascript,Html,我有一个javascript/HTML5页面，我想用它来拉入一个文件，并检查每一行是否大于240个字符：编辑：我现在已经正确地解析了一些东西，但是它们没有正确地呈现。以下是我的更新代码： <!DOCTYPE HTML> <html> <head> <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combine

我有一个javascript/HTML5页面，我想用它来拉入一个文件，并检查每一行是否大于240个字符：

编辑：我现在已经正确地解析了一些东西，但是它们没有正确地呈现。以下是我的更新代码：

<!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>




if（window.File&&window.FileReader&&window.FileList&&window.Blob）{
//非常成功！支持所有文件API。
}否则{
警报（'此浏览器不完全支持文件API'）；
}
功能手柄文件选择（evt）{
var files=evt.target.files；//文件列表对象
//文件是文件对象的文件列表。请列出一些属性。
var输出=[]；
for（var i=0，f；f=files[i]；i++）{
var reader=new FileReader（）；
reader.onload=函数（e）{
//打印文件的内容
var text=e.target.result；
var lines=text.split（//[\r\n]+/g）；//允许Windows和Unix换行符
对于（变量i=0；i240）{
push（''+行[i]+'
'）；
}
}
};
reader.readAsText（f，“UTF-8”）；
}
document.getElementById（'files'）。innerHTML='超过240个字符的路径：
'+输出。连接（'''+''；
}
document.getElementById（'input'）。addEventListener（'change'，handleFileSelect，false）；

我可以运行跟踪并查看

output

变量是否正确填充，但我得到的输出结果是：

超过240个字符的路径：

没有

output.join（）

零件渲染是否正确--有什么想法吗？

显而易见的方法（如果您能容忍一次读取所有文件）就是用换行符把它分开

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) { /* ... */ });

var lines=text.split（/[\r\n]+/g）；//允许Windows和Unix换行符
对于（var i=0；i

我想你应该把
document.getElementById('files').innerHTML = 'Paths with more than 240 characters: <br><ul>' + output.join('') + '</ul>';

为什么要这样使用forEach构造函数？它不是构造函数，而是数组上的方法。。。不管怎样，这只是个人喜好的问题。就是这样！我猜这是本地作用域问题？@fox否。读取文件内容是异步操作，所以当您尝试使用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>';
};