如何用纯JavaScript读取URL指定目录下的文件名？

嘿，我来帮你搞定这个问题！你之前用XMLHttpRequest直接请求目录URL没成功，主要是因为大多数Web服务器默认不会返回目录的文件列表——除非服务器特意配置了目录索引（比如Apache的mod_autoindex模块开启，或者Nginx设置了autoindex on）。另外还要注意跨域问题，如果你的JS代码运行的域名和目标目录的域名不一样，浏览器的同源策略会阻止请求，这时候需要服务器配置CORS头才行。

下面分两种情况给你解决方案：

情况1：服务器已开启目录索引（返回文件列表HTML） #

如果服务器允许目录索引，请求后会返回一个类似Apache默认的文件列表页面（包含<a>标签指向每个文件）。这时候我们可以通过解析HTML来提取文件名：

function fetchDirectoryFiles(directoryUrl) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', directoryUrl, true);

  xhr.onload = function() {
    if (xhr.status === 200) {
      // 把返回的HTML字符串解析成DOM文档
      const parser = new DOMParser();
      const htmlDoc = parser.parseFromString(xhr.responseText, 'text/html');
      
      // 获取页面中所有的链接标签
      const linkElements = htmlDoc.querySelectorAll('a');
      const fileNames = [];

      linkElements.forEach(link => {
        const href = link.getAttribute('href');
        // 过滤掉上级目录（../）和当前目录（./）的链接
        if (href !== '../' && href !== './') {
          // 提取文件名（如果href是完整路径，用split('/').pop()获取最后一段）
          const fileName = href.split('/').pop();
          fileNames.push(fileName);
        }
      });

      // 输出文件名到控制台
      console.log('目录中的文件名：', fileNames);
    } else {
      console.error(`请求失败，状态码：${xhr.status}`);
    }
  };

  xhr.onerror = function() {
    console.error('请求过程中发生错误，请检查网络或URL是否正确');
  };

  xhr.send();
}

// 调用函数，替换成你的目标目录URL
fetchDirectoryFiles('http://somesite.whereisthis/directoryThatContainsFiles');

这段代码的逻辑是：请求目录URL → 解析返回的HTML → 筛选出有效文件链接 → 提取文件名并输出到控制台。

情况2：服务器未开启目录索引（必须依赖后端接口） #

如果服务器没有配置目录索引，直接请求目录URL会返回403/404错误，这时候纯前端JS无法直接读取服务器目录的文件列表——你需要后端配合，写一个接口来返回该目录下的文件列表（比如返回JSON格式的数据）。

假设后端提供了一个接口/api/get-directory-files，返回的JSON格式是["file1.txt", "image.jpg", "document.pdf"]，那你可以这样请求：

function fetchFilesFromAPI(apiUrl) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', apiUrl, true);
  xhr.responseType = 'json'; // 指定响应类型为JSON

  xhr.onload = function() {
    if (xhr.status === 200) {
      console.log('目录中的文件名：', xhr.response);
    } else {
      console.error(`请求接口失败，状态码：${xhr.status}`);
    }
  };

  xhr.onerror = function() {
    console.error('请求接口时发生错误');
  };

  xhr.send();
}

// 调用函数，替换成你的后端接口URL
fetchFilesFromAPI('http://somesite.whereisthis/api/get-directory-files');

重要注意事项 #

• 跨域问题：如果你的JS代码运行在http://your-site.com，而目标目录在http://somesite.whereisthis，浏览器会阻止请求。这时候需要目标服务器配置Access-Control-Allow-Origin头，允许你的域名访问。
• 服务器配置：第一种方案完全依赖服务器是否开启目录索引，如果服务器禁用了这个功能，方案1就无效。

内容的提问来源于stack exchange，提问作者Marcin Głąb