所以，我一直在处理一个只使用本地文件的页面（不幸的是，服务器不是一个选项。甚至不是本地主机。斗争是真实的。）我遇到了需要从中获取文本的情况一个.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％的可能性我完全错了，因为我显然不知道如何完成这项工作。
如果有人能告诉我如何实现这一点，我会非常感激。我绝对难过。
谢谢。
注意：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>