Question

我有一个小的html文件，它应该在屏幕上显示文本文件的内容。文本（values.txt）与html文件位于同一文件中。看来，当它读取内容时，它没有获得值，因为它们没有出现在警报中。

这是代码

<html>
<head>
<!--<input type="file" id="fileinput" />-->
<script type="text/javascript">

  function readSingleFile(file) {
    var f = new File([""], "filename.txt", {type: "text/plain"})
    if (f) {
      var r = new FileReader();
      r.onload = function(e) { 
          var contents = e.target.result;             
          var ct = r.result;
          var words = ct.split(' ');            
          alert(words[0] + 'test'); //this alert goes off but no values from words[0] are displayed
      }
      r.readAsText(f);
    } else { 
      alert("Failed to load file");
    }
  }

  //readSingleFile('values.txt');
</script>
</head>
<body onload="readSingleFile('values.txt')">
</body>
</html>

如何将文本文件读入列表/使此代码段生效？

Answer 1

主要问题是首先需要获取函数的文件。仅将文件名称作为参数传递是不够的。

最好使用类型为file的输入，而不是使用onload属性。

我已经重构了你的代码，以使其有效。

1。在Html上使用此功能并删除body onload属性。

<input id="inp" type="file" />">

将此函数添加到外部js文件或将其包装在html文件中的脚本标记之间。


    function readSingleFile(evt) {
    var f = evt.target.files[0]; 
    if (f) {
     var r = new FileReader();
       r.onload = function(e) { 
       var contents = e.target.result;
        alert( "Got the file.n" 
         +"name: " + f.name + "n"
         +"type: " + f.type + "n"
         +"size: " + f.size + " bytesn"
         + "starts with: " + contents.substr(1, contents.indexOf("n"))
        );  
      }
      r.readAsText(f);
     } else { 
      alert("Failed to load file");
     }
    }
    // this parts gets the file and keeps an eye for changes
    document.getElementById('inp').addEventListener('change', readSingleFile,false);

我希望你会发现这很有用。

Answer 2

不幸的是，我确实没有让它与你的方法一起工作。正如 Antonio682 建议的那样，最好使用input字段进行操作，但您也可以尝试使用ajax调用：

<html>
<head>
<!--<input type="file" id="fileinput" />-->
<script type="text/javascript">

      function readSingleFile(file) {
        var objXMLhttp = new XMLHttpRequest()
        objXMLhttp.open("GET", file, true);
        objXMLhttp.send();
        objXMLhttp.onreadystatechange = function(){
              if (objXMLhttp.readyState == 4){
                if(objXMLhttp.status == 200) {
                    var arrContents = objXMLhttp.responseText.split("\n"); 
                    console.log(arrContents);
                } else {
                    console.log("error");
                }
            }
        }
      }
</script>
</head>
<body onload="readSingleFile('values.txt')">
</body>
</html>

您可能希望使用Firefox进行测试，因为Chromes安全设置不允许文件协议请求。

您可以阅读有关ajax调用here

的更多信息

如何将本地文本文件读入数组列表Javascript

2 个答案: