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

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

javascript html

Javascript 在加载时使用FileReader从文件中获取文本,javascript,html,text-files,filereader,Javascript,Html,Text Files,Filereader,所以，我一直在一个只使用本地文件的页面上工作（不幸的是，服务器不是一个选项，甚至不是本地主机。斗争是真实的。）我遇到了一种情况，需要从.csv文件中获取文本并将其填充到页面中。我有这段代码可以工作，但是当按下按钮时，我需要在函数中设置一个文件。手动查找文件不是一个选项（为了可视化我正在做的事情，我正在以最烦人的方式创建一个模拟数据库文件（因为我必须这样做，而不是因为我想这样做））在页面中，我会有如下内容： <button id="myButton" onclick="getText()"

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

在页面中，我会有如下内容：

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

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


var myFile=“dataset.csv”；
...

下面的代码可以工作（关于让它从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>


函数readSingleFile（evt）{
var f=evt.target.files[0]；
如果（f）{
var r=新文件读取器（）；
r、 onload=函数（e）{
var内容=e.target.result；
var splited=contents.split（/\r\n |\n |\r |，/g）；
对于（i=0；i注意：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>


点击我
函数readSingleFile（）{
设xhr=newXMLHttpRequest（）；
让url=“relative/path/to/file.txt；
如果（！url）返回；
xhr.onload=数据加载；
xhr.onerror=\u=>“加载文件时出错。”；
xhr.overrideMimeType（“文本/普通”）；
xhr.open（“GET”，url）；
xhr.send（）；
}
函数数据加载（e）{
var contents=e.target.responseText；
var splited=contents.split（/\r\n |\n |\r |，/g）；
对于（i=0；i首先，欢迎使用Stack Overflow！…您应该使用FileReader吗？或者您可以使用其他类似ajax的工具从csv文件加载数据？谢谢！我通常会找到我需要的东西，因此我必须创建一个帐户来问这个问题这一事实让我发疯。如果我错了，请纠正我，但是ajax和XML不需要服务器来获取数据吗这个文件？我知道我试过了，它不起作用是有原因的，但它被其他500件同样不起作用的东西淹没了。我没有一个好的答案给你。啊，我开始感到恼火了。Firefox也不是一个选项。我制作这个页面的人是100%Chrome，所以我不相信这是一个可行的解决方案。对不起，就像我一样他说：“因为我必须，不是因为我想"lolI不认为你想用Javascript做什么是可能的。你可以在Chrome中禁用CORS安全以运行上面的脚本，但我不建议这样做：你知道，我差不多在一个小时前就这样做了，但我意识到，如果我可以通过输入框获取文件来实现这一点，那么我应该可以做任何不能做的事情输入框在一个函数中处理文件，而不使用输入框。这是我的想法。你不能。这是一个巨大的安全漏洞。如果是这样的话，你可以读取用户机器上的任何文件。