jQuery 加载目录里的全部图片，关键其实在服务器

开发调优
, ,
1

浏览器里的 JavaScript 不能直接遍历服务器文件夹。图片名称没有规律时，前端想把一个目录里的文件全部展示出来，需要服务器先返回目录列表，前端再从列表中筛选图片链接。

先确认目录 URL 能返回文件列表

下面这种写法依赖一个前提：请求 images/ 时，服务器返回的是带有文件链接的目录页面。如果目录浏览没有开启，Ajax 就拿不到可供遍历的 <a> 元素。

const folder = "images/";

$.ajax({
  url: folder,
  success(data) {
    $(data).find("a").attr("href", function (_, href) {
      if (href && /\.(jpe?g|png|gif)$/.test(href)) {
        $("body").append(`<img src="${folder + href}">`);
      }
    });
  }
});

这里不是在读取本地文件系统，而是在解析服务器生成的 HTML。正则只保留以 jpg、jpeg、png 或 gif 结尾的链接，其他目录项会被跳过。

Express 需要显式提供目录索引

如果项目使用 Express，可以用 serve-index 为指定目录生成列表：

const express = require("express");
const path = require("path");
const serveIndex = require("serve-index");

const app = express();

app.use(
  "/images",
  serveIndex(path.join(__dirname, "/images"))
);

Apache 环境下是否能直接请求目录，取决于 Options Indexes 配置；Express 则需要像上面这样单独提供目录索引。换句话说，这段 jQuery 不是一个脱离服务端配置就能工作的通用方案。

如果服务器本来就不会暴露目录列表，前端代码再怎么换选择器也拿不到文件名。这时应先让服务端提供明确的图片清单，再让页面根据清单生成 <img>，而不是继续尝试从文件夹路径中猜出有哪些文件。