Javascript 让用户选择一个文本文件，然后从中读取内容答案

【问题标题】：Javascript let a user select a text file and then read the contents from itJavascript 让用户选择一个文本文件，然后从中读取内容
【发布时间】：2019-03-20 14:48:47
【问题描述】：

我正在尝试从文本文件进行基本文件输入。我在网上查看了各种帖子并获得了一些解决方案，但是，他们的解决方案向我返回了不同的警报。我希望我的警报像他们一样在其中包含文件的内容，但是我的文件类型重复。

我不懂 JQuery，所以我更喜欢用 javascript 来回答，否则我会很难理解。

    function fileSelected(el){
    if(el.files && el.files[0]){
        var f = el.files[0]; 

        if(f){
            var FR = new FileReader();
            FR.onload = function(e) {
                var contents = e.target.result;
                console.log(contents.substr(1, contents.indexOf("n")));
                alert( "Got the file.\n" 
                    +"name: " + f.name + "\n"
                    +"type: " + f.type + "\n"
                    +"size: " + f.size + " bytes \n"
                    + "starts with: " + contents.substr(1, contents.indexOf("n"))
                );
            };       
            FR.readAsDataURL( el.files[0]);
        }

    }   
}

<html>
    <head>
        <title>Import File Attempt</title>
        <link rel="stylesheet" type="text/css" href ="style.css">
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <input type="file" id="fileChoice" onchange="fileSelected(this)">
    </body>
</html>

这是我收到的警报： Screenshot of my alert

这是我想要的警报： Alert I wanted

编辑：考虑添加文本文件的屏幕截图以防万一： My text file

【问题讨论】：

请注意，字符串中的字符是从0 开始编号的，因此substr(1,...) 调用会为您获取从字符串的第二个字符开始的字符串。这就是它变成 ata:... 的方式 - 最初数据 URL 以 data:... 开头。
附注：幸运的是，文本文件的数据 URL 以 data:text/plai-n 开头，因此代码确实可以与 @987654331 一起使用@，因为它会查找字母“n”并找到一个。但是，如果您的意思是查找换行符，则应该是indexOf('\n')，并且还要注意，如果文本文件中有换行符，它只会显示正确的结果。

标签： javascript html file text

【解决方案1】：

如果它是一个文本文件，我建议使用FileReader.readAsText()阅读它：

function loadfile(event){
  var fr=new FileReader();
  fr.onload=function(){
    txt.value=fr.result;
  };
  fr.readAsText(event.target.files[0]);
}

textarea{
  width: 95%;
  height: 300px;
}

<input type="file" accept="text" onchange="loadfile(event)"><br>
<textarea id="txt"></textarea>

（name-type-size 已经工作得很好，所以我把它们排除在外）

【讨论】：

【解决方案2】：

我不知道我是否很好地理解了这个问题。你想读取文件的内容吗？对于 .txt 文件：

console.log(contents.substr(23,));

截断：data:text/plain;base64，会显示Base64编码的文件内容

也检查一下：

var str = "data:text/plain;base64,VGVzdG93YSB0cmXFm8SHCg==";
console.log (str.replace(/^\S+64,/, ''));

它也适用于 txt 以外的其他文件当然，适应您的需求。

【讨论】：