在加载时使用 FileReader 从文件中获取文本

Question

所以，我一直在处理一个只使用本地文件的页面（不幸的是，服务器不是一个选项。甚至没有本地主机。斗争是真实的。）我遇到了这样一种情况需要从 .csv 文件中获取文本并将其填充到页面中。我有这段有效的代码，但是当按下按钮时，我需要在函数中设置一个文件。手动查找文件不是一种选择（为了形象化我在做什么，我正在以最烦人的方式制作模拟数据库文件（因为我必须这样做，而不是因为我想这样做））。

在页面中我会有这样的东西：

<button id="myButton" onclick="getText()"></button>

<script>
var myFile = "dataset.csv";
...
</script>

下面的代码有效（关于让它从 csv 文件中提取数据），但是，正如我所说，我需要在按下按钮时从文件中提取文本，并且只需要脚本中设置的文件名，而不是手动将其拉出。

<!DOCTYPE html>
<html>
   <body>
      <input type="file" id="fileinput" />
      <div id="outputdiv"></div>
      <script type="text/javascript">
           function readSingleFile(evt) {
             var f = evt.target.files[0]; 
             if (f) {
               var r = new FileReader();
               r.onload = function(e) { 
                  var contents = e.target.result;
                      var splited = contents.split(/\r\n|\n|\r|,/g);
                      for (i=0; i<splited.length; i++){
                         document.getElementById("outputdiv").innerHTML = document.getElementById("outputdiv").innerHTML + splited[i] + "<br>";
                      }     
                     }
               r.readAsText(f);
             } else { 
               alert("Failed to load file");
             }         
           }
           document.getElementById('fileinput').addEventListener('change', readSingleFile, false);
      </script>
   </body>
</html>

据我从 API 中得知，我需要将文件属性设置为 blob，以便将其传递给 FileReader。我不知道如何在不使用输入框的情况下做到这一点。也有 50% 的可能性我完全错了，因为我显然不知道如何完成它。

如果有人能告诉我如何实现我正在寻找的东西，我将不胜感激。我完全被难住了。

谢谢。

Answer 1

注意：CORS 限制将阻止它在大多数浏览器中工作。您可以使用禁用 CORS 验证的 FireFox Developer Edition。

您可以使用 XMLHttpRequest 加载本地文件：

<!DOCTYPE html>
<html>
   <body>
      <button onclick="readSingleFile()">Click Me</button>
      <div id="outputdiv"></div>
      <script type="text/javascript">
         function readSingleFile() {
            let xhr = new XMLHttpRequest();
            let url = "relative/path/to/file.txt;
            if (!url) return;
            xhr.onload = dataLoaded;
            xhr.onerror = _ => "There was an error loading the file.";
            xhr.overrideMimeType("text/plain");
            xhr.open("GET",url);
            xhr.send();
          }

          function dataLoaded(e){
            var contents = e.target.responseText;
            var splited = contents.split(/\r\n|\n|\r|,/g);
            for (i=0; i<splited.length; i++){
              document.getElementById("outputdiv").innerHTML = document.getElementById("outputdiv").innerHTML + splited[i] + "<br>";
            }
      </script>
   </body>
</html>

在加载时使用 FileReader 从文件中获取文本

Getting text from file using FileReader on Load

html

javascript

text-files

filereader