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限制条件将阻止此功能在大多数浏览器中运行。您可以使用FireFox Developer Edition，它会禁用CORS验证。

您可以使用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从文件中获取文本

1 个答案: