JavaScript能否读取文件夹所有文件名并作为参数动态生成链接？

普通浏览器端JavaScript出于安全沙箱限制，无法直接读取服务器或本地文件夹的文件列表，需要根据你的使用场景选择对应实现方式：

场景1：常规Web项目（有后端服务/静态服务器） #

你只需要先拿到指定子文件夹的文件名列表，再遍历生成超链接即可，无需手动逐个编写a标签。

1. 先让服务端提供一个返回子文件夹文件名的接口，返回格式示例如下：

["报告.docx", "数据统计表.xlsx", "演示文稿.pptx"]

如果用的是Nginx、Apache这类静态服务器，直接开启对应子文件夹的索引功能，也能拿到文件列表，不用单独写后端接口。

2. 前端实现代码如下：

<!-- 用于存放自动生成的文件链接的容器 -->
<div id="file-link-container"></div>

<script>
// 你原有的调用函数
function myfunction(id1) {
  alert(id1);
}

// 页面加载完成后自动拉取文件列表生成链接
window.addEventListener('load', async () => {
  try {
    // 替换为你的文件列表接口地址
    const response = await fetch('/api/get-subfolder-files');
    const fileList = await response.json();
    const container = document.getElementById('file-link-container');

    fileList.forEach(filename => {
      const link = document.createElement('a');
      link.href = '#';
      link.textContent = filename;
      // 绑定点击事件，传入当前文件名
      link.addEventListener('click', () => myfunction(filename));
      container.appendChild(link);
      // 可选：每个链接换行，你也可以自定义样式调整间距
      container.appendChild(document.createElement('br'));
    })
  } catch (error) {
    console.error('文件列表加载失败：', error);
  }
})
</script>

场景2：Electron/Node.js等有文件系统权限的场景 #

如果你的运行环境允许直接读取本地文件系统，直接调用文件读写API读取文件夹内容即可，示例代码如下：

const fs = require('fs/promises');
const path = require('path');
// 替换为你的子文件夹本地路径
const SUB_FOLDER = path.join(__dirname, './your-target-subfolder');

async function generateFileLinks() {
  // 读取文件夹内所有文件名
  const fileList = await fs.readdir(SUB_FOLDER);
  const container = document.getElementById('file-link-container');
  // 生成链接逻辑和上述前端代码完全一致
  fileList.forEach(filename => {
    const link = document.createElement('a');
    link.href = '#';
    link.textContent = filename;
    link.addEventListener('click', () => myfunction(filename));
    container.appendChild(link);
    container.appendChild(document.createElement('br'));
  })
}

generateFileLinks();

无后端纯静态页面折中方案 #

如果是没有后端的纯静态页面，你可以单独维护一个file-list.json文件存所有文件名，每次新增文件只要更新这个json文件即可，比逐个修改HTML里的a标签效率高很多。

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