无服务器环境下点击按钮用FileReader读取指定本地CSV文件

首先得明确一个关键限制：出于安全考虑，浏览器（哪怕是在file://协议下）不允许JavaScript脚本直接访问本地文件系统中的指定文件——这是为了防止恶意网页未经用户授权就读取你的本地文件。所以你没办法直接通过脚本指定dataset.csv路径就自动读取它，必须要有用户的主动交互（比如选择文件）。不过我们可以通过一些变通方法来接近你想要的效果：

方法1：将CSV内容内嵌为Blob（无需外部文件） #

如果你的dataset.csv内容是固定的，可以把它直接内嵌到页面的JavaScript中，转换成Blob后用FileReader读取，这样点击按钮就能直接展示内容，完全不需要外部文件：

<!DOCTYPE html>
<html>
<body>
<button id="readBtn">读取CSV内容</button>
<div id="outputdiv"></div>
<script type="text/javascript">
// 这里替换成你的dataset.csv的实际内容
const csvContent = `姓名,年龄,城市
张三,25,北京
李四,30,上海
王五,28,广州`;

function readCSV() {
  // 将字符串转为Blob，模拟文件对象
  const blob = new Blob([csvContent], { type: 'text/csv' });
  const r = new FileReader();
  r.onload = function(e) {
    const contents = e.target.result;
    const splited = contents.split(/\r\n|\n|\r|,/g);
    let outputHtml = '';
    for(let i=0; i<splited.length; i++){
      outputHtml += splited[i] + "<br>";
    }
    document.getElementById("outputdiv").innerHTML = outputHtml;
  }
  r.readAsText(blob);
}

document.getElementById('readBtn').addEventListener('click', readCSV, false);
</script>
</body>
</html>

方法2：优化文件选择体验（接近“指定文件名”的需求） #

如果你的CSV文件需要随时更新，没办法内嵌，可以优化文件选择流程，引导用户选择特定的dataset.csv，同时在页面上明确提示用户选择该文件：

<!DOCTYPE html>
<html>
<body>
<!-- 隐藏默认的文件选择框 -->
<input type="file" id="fileinput" accept=".csv" style="display:none" />
<button id="readBtn">读取dataset.csv</button>
<div id="outputdiv"></div>
<script type="text/javascript">
function readSingleFile(evt) {
  const f = evt.target.files[0];
  if (f) {
    // 验证文件名是否为dataset.csv
    if(f.name !== 'dataset.csv'){
      alert('请选择名为dataset.csv的文件');
      return;
    }
    const r = new FileReader();
    r.onload = function(e) {
      const contents = e.target.result;
      const splited = contents.split(/\r\n|\n|\r|,/g);
      let outputHtml = '';
      for(let i=0; i<splited.length; i++){
        outputHtml += splited[i] + "<br>";
      }
      document.getElementById("outputdiv").innerHTML = outputHtml;
    }
    r.readAsText(f);
  } else {
    alert("Failed to load file");
  }
}

// 点击按钮触发文件选择框
document.getElementById('readBtn').addEventListener('click', function(){
  document.getElementById('fileinput').click();
}, false);

document.getElementById('fileinput').addEventListener('change', readSingleFile, false);
</script>
</body>
</html>

为什么不能直接读取指定文件？ #

浏览器的安全模型严格限制了脚本对本地文件系统的访问：

• 在file://协议下，脚本只能访问与当前页面同目录或子目录的文件，但仍然需要用户的主动选择操作，不能自动读取。
• 没有任何合法的方式让脚本绕过用户交互直接读取指定路径的本地文件——这是浏览器的核心安全机制，保护用户隐私。

内容的提问来源于stack exchange，提问作者Thomas Patton