使用 javascript 显示 txt 文件中的文本

To display text from a txt file using javascript

本文关键字:文本 文件 txt javascript 显示 使用      更新时间:2023-09-26

如何使用一个按钮浏览文件和另一个按钮显示文本从 txt 文件中读取文本。请帮助我获取代码。我已经尝试了很多代码,但不起作用。有些代码是这样的。提前致谢

<!DOCTYPE html>
<html>
  <head>
    <title>reading file</title>
    <script type="text/javascript">
        var reader = new FileReader();
        function readText(that){
            if(that.files && that.files[0]){
                var reader = new FileReader();
                reader.onload = function (e) {  
                    var output=e.target.result;
                    //process text to show only lines with "@":             
            output=output.split("'n").filter(/./.test, /'@/).join("'n");
                document.getElementById('main').innerHTML= output;
                };//end onload()
                reader.readAsText(that.files[0]);
            }//end if html5 filelist support
        } 
</script>
</head>
<body>
    <input type="file" onchange='readText(this)' />
    <div id="main"></div>
  </body>
</html>

你应该正确地阅读这样的文章: http://www.html5rocks.com/en/tutorials/file/dndfiles/

不要认为这条线工作正常:

output=output.split("'n").filter(/./.test, /'@/).join("'n");

尝试将其更改为:

output=output.split("'n").filter(function(l) {
    //return /^'@/.test(l); // Starting with @
    return l.indexOf('@') > -1; // Containing @
}).join("'n");

看看这是否也有效会很有趣:

output=output.split("'n").filter(/'@/.test.bind(/'@/)).join("'n");

传递给 .filter 方法的第二个参数是上下文:

array.filter(callback[, thisObject])

获取输入文件,使用 FileReader() 读取它,在文件加载时获取与模式匹配的文本。最后通过"主要"div显示它。 应该工作..

.HTML:

<input id="fileInput" type="file"/>
<div id="main"></div>

j查询 :

$(function(){
        $("#fileInput").change(function(e){
            var myFile = e.target.files[0];
            var reader = new FileReader();
            reader.onload = function(e){
                var output = e.target.result;
                output=output.split("'n").filter(/./.test, /'@/).join("'n");
                $("#main").text(output);
            };
            reader.readAsText(myFile)
        });
    }
)

演示