页面OnLoad事件通过JS Prompt获取CSV路径并加载至DIV的问题

问题根源 #

用prompt()弹窗获取文件路径的方式完全走不通——现代浏览器出于安全限制，禁止JS直接通过本地文件路径读取文件，而且prompt()也没法唤起系统文件管理器让用户可视化选择文件，这就是你加载环节卡壳的核心原因。

解决方案：用原生文件选择控件实现 #

直接用<input type="file">控件唤起文件管理器，配合FileReader API读取文件内容，页面加载时自动触发选择框，代码如下：

<!-- 页面结构 -->
<div id="csv-content"></div>
<!-- 隐藏的文件选择控件 -->
<input type="file" id="csv-file-input" accept=".csv" style="display: none;">

<script>
window.addEventListener('load', function() {
  // 获取文件选择控件和目标DIV
  const fileInput = document.getElementById('csv-file-input');
  const contentDiv = document.getElementById('csv-content');

  // 页面加载完成后自动触发文件选择框
  fileInput.click();

  // 监听文件选择事件
  fileInput.addEventListener('change', function(e) {
    const selectedFile = e.target.files[0];
    if (!selectedFile) return;

    // 检查是否是CSV文件
    if (!selectedFile.name.endsWith('.csv')) {
      alert('请选择CSV格式的文件');
      return;
    }

    // 读取文件内容
    const reader = new FileReader();
    reader.onload = function(event) {
      // 将CSV内容展示到DIV中
      contentDiv.textContent = event.target.result;
      // 如果需要格式化展示，可换成pre标签：
      // contentDiv.innerHTML = '<pre>' + event.target.result + '</pre>';
    };
    reader.readAsText(selectedFile);
  });
});
</script>

关键说明 #

• 隐藏的<input type="file">控件通过click()方法在页面加载时唤起文件管理器，用户体验更友好
• accept=".csv"限制只能选择CSV文件，避免错误选择
• 使用FileReader.readAsText()读取文件内容，这是浏览器允许的安全文件读取方式
• 如果需要把CSV解析成表格展示，可以在reader.onload里添加CSV解析逻辑（比如按逗号拆分每行数据生成表格）

内容的提问来源于stack exchange，提问作者Warley Ferreira Dias