javascript：输入一个txt文件以创建一个数组，并以html格式输出其containt_Javascript_Arrays_Txt_Input Type File

javascript：输入一个txt文件以创建一个数组，并以html格式输出其containt

javascript arrays

javascript：输入一个txt文件以创建一个数组，并以html格式输出其containt,javascript,arrays,txt,input-type-file,Javascript,Arrays,Txt,Input Type File,我试图从一个txt文件中读取数据，该文件可以从输入类型文件中选择，并通过数组将存储的信息传递到html内容中关于这一点已经有很多文章了，但是除了下面的内容，似乎没有人真正适合我的情况——实际上，这一点很好，但是应该有点“标准化”，以便从函数调用因此，我现在尝试的是类似的东西（因为这不是真正的工作）：读取文本文件函数splitARRAY（）{ var file=document.getElementById（'myFile2'）； addEventListener（'change'，（）

我试图从一个txt文件中读取数据，该文件可以从输入类型文件中选择，并通过数组将存储的信息传递到html内容中

关于这一点已经有很多文章了，但是除了下面的内容，似乎没有人真正适合我的情况——实际上，这一点很好，但是应该有点“标准化”，以便从函数调用

因此，我现在尝试的是类似的东西（因为这不是真正的工作）：


读取文本文件
函数splitARRAY（）{
var file=document.getElementById（'myFile2'）；
addEventListener（'change'，（）=>{var txtArr=[]；
var fr=new FileReader（）；
fr.onload=函数（）{
//排队
var lines=this.result.split（'\n'）；
对于（var line=0；line
txt变量1

txt变量2 txt变量4

txt变量3 txt变量5

我肯定做错了什么，因为这样我根本没有获得变量数据，但我真的看不出什么是错的。顺便说一下，如果有人有更好的解决方案，我愿意尝试。

您在
```
）}
```
只使用
```
fr.onload
```
是不够的，但它永远不会被调用，因为你在它里面调用readAsText
您在侦听更改事件时也有问题。当它第一次更改时，您调用splitARRAY函数，该函数每次更改时只添加一个新的eventlistener

无论如何，这里有一个更现代的方法，使用新的读取方法

var fileInput=document.getElementById（'myFile2'）；
fileInput.addEventListener（'change'，async（）=>{
var txtArr=[]
var file=fileInput.files[0]
如果（！文件）返回
var text=await file.text（）
//排队
变量行=text.split（'\n'）
对于（var line=0；line





txt变量1

txt变量2 txt变量4

txt变量3 txt变量5
好的，我可以看到它在stackoverflow中提供的代码段工具中做了一些事情，它加载数组并显示一个值。我真正怀念的是在应该使用的外部文件中获得工作。你真的是说我不必调用类似的函数？编辑了我的答案…你仍然可以使用onchange=“splitARRAY（event）；”如果你愿意，但你必须按照我在opt 3Oh中向你展示的那样做，顺便说一句，使用innerText比使用innerHTML更安全如果它适合你是的，innerText就可以了。我知道eventlistener有一些问题，实际上我无法使用选项2实现该函数-但这不是新闻，总是有问题。wh目前，我真的很担心自己是否无法使其正常工作选项3，基本上是在脚本区域中调用了函数，正如您建议的那样，粘贴“var txtArr=[]”中以前的代码，但替换为“var file=event.target.files[0]”，其中使用fileInput.files[0]我的浏览器也没有给我错误页面。谢谢你的时间，但我没有成功。我最终成功地使用了eventlistener，我可以确认你提供的解决方案是正确的。
<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <title>Read Text File</title> 
    <script>
      function splitARRAY(){
        var file = document.getElementById('myFile2');
        file.addEventListener('change', () => { var txtArr = [];
          var fr = new FileReader();
          fr.onload = function() {
            // By lines 
            var lines = this.result.split('\n');
            for (var line = 0; line < lines.length; line++) {
              txtArr = [...txtArr, ...(lines[line].split(" "))];
            }
            fr.onloadend = function() {
              console.log(txtArr);
              document.getElementById('other').textContent=txtArr.join("");
              document.getElementById("other2").innerHTML = txtArr[0];
              document.getElementById("other3").innerHTML = txtArr[1];
              document.getElementById("other4").innerHTML = txtArr[2];
              document.getElementById("other5").innerHTML = txtArr[3];
              
              console.log(txtArr[1]);
              
              fr.readAsText(file.files[0]);
            }
            )
          }
    </script>
  </head>
  <body> 
    <input type="file" id="myFile2" onchange="splitARRAY();">
    </br>
    <span id="other">txt variable 1</span> </br>
    <span id="other2">txt variable 2</span> <span id="other4">txt variable 4</span></br>
    <span id="other3">txt variable 3</span> <span id="other5">txt variable 5</span></br>
  </body> 
</html>