如何用JavaScript从本地文件夹动态获取媒体文件

浏览器端JavaScript出于安全限制，无法直接读取本地文件系统的目录结构，这是你之前代码失效的根本原因——你的代码是在页面里找<a>标签的链接，但如果页面里没有预先放置这些文件的链接，自然拿不到任何内容。下面是几种适合新手的可行方案：

方案1：用简易服务器脚本生成文件列表（推荐，适合本地开发/小型站点） #

如果你的项目是在服务器环境下运行（哪怕是本地的Node.js/PHP服务器），可以用服务器端代码读取imgs/文件夹的文件，然后把列表传给前端。

示例（Node.js + Express）： #

1. 先安装Express：npm install express
2. 创建服务器文件server.js：

const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();

// 静态文件托管，让前端能访问imgs文件夹
app.use(express.static('.'));

// 接口：获取imgs文件夹的文件列表
app.get('/get-imgs-list', (req, res) => {
  const imgsDir = path.join(__dirname, 'imgs');
  fs.readdir(imgsDir, (err, files) => {
    if (err) {
      return res.status(500).send('读取文件夹失败');
    }
    // 过滤出需要的文件类型
    const allowedExts = ['jpg', 'jpeg', 'mp4', 'gif'];
    const validFiles = files.filter(file => {
      const ext = file.split('.').pop().toLowerCase();
      return allowedExts.includes(ext);
    });
    res.json(validFiles);
  });
});

app.listen(3000, () => {
  console.log('服务器运行在http://localhost:3000');
});

3. 前端代码修改：用fetch请求接口获取列表，再初始化轮播

// 先请求文件列表，再初始化轮播
fetch('/get-imgs-list')
  .then(res => res.json())
  .then(mediaFiles => {
    let slideshow = {
      container: '#slideshow-container',
      media: mediaFiles, // 用动态获取的列表
      folder: 'imgs/',
      autoplay: 'yes',
      endless: 'yes'
    };
    // 这里调用你的轮播初始化代码（如果之前有）
    initSlideshow(slideshow);
  })
  .catch(err => console.error('获取文件列表失败：', err));

方案2：用前端构建工具自动生成文件列表（适合静态站点） #

如果你的项目用Webpack/Vite这类构建工具，可以用它们的内置功能自动扫描文件夹，生成文件数组。

示例（Webpack）： #

在前端代码中用require.context扫描imgs/文件夹：

// 扫描imgs文件夹，匹配所有jpg/jpeg/mp4/gif文件
const requireMedia = require.context('./imgs', false, /\.(jpg|jpeg|mp4|gif)$/);
// 提取文件名
const mediaFiles = requireMedia.keys().map(item => item.replace('./', ''));

let slideshow = {
  container: '#slideshow-container',
  media: mediaFiles,
  folder: 'imgs/',
  autoplay: 'yes',
  endless: 'yes'
};
// 初始化轮播
initSlideshow(slideshow);

Webpack会在打包时自动收集这些文件，生成对应的数组，不需要手动维护。

方案3：让用户手动选择文件（适合临时测试） #

如果只是本地测试，不想搭服务器，可以用<input type="file" multiple>让用户选择imgs/里的文件，然后把选择的文件名传给轮播：

<input type="file" id="mediaPicker" multiple accept=".jpg,.jpeg,.mp4,.gif">
<div id="slideshow-container"></div>

document.getElementById('mediaPicker').addEventListener('change', (e) => {
  const mediaFiles = Array.from(e.target.files).map(file => file.name);
  let slideshow = {
    container: '#slideshow-container',
    media: mediaFiles,
    folder: 'imgs/',
    autoplay: 'yes',
    endless: 'yes'
  };
  initSlideshow(slideshow);
});

注意：这种方式需要用户手动选择文件，不能自动扫描文件夹。

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