如何使用JS获取XAMPP服务器指定目录下的文件名以开发相册应用

前端JavaScript没有直接读取服务器端文件目录的权限，你需要先通过PHP提供返回图片列表的接口，再用前端JS请求接口数据渲染页面即可，具体实现步骤如下：

1. 编写PHP接口返回图片列表 #

在你的项目根目录下新建get_images.php文件，代码如下：

<?php
// 此处填写你实际存储图片的目录，你提的是photos目录就改为'photos/'
// 注意你现有上传代码中存储的是images/目录，需保持路径一致
$image_dir = 'images/';
$allowed_ext = ['jpeg', 'jpg', 'png'];
$image_list = [];

// 遍历目录筛选符合要求的图片
foreach (scandir($image_dir) as $file) {
    // 跳过系统默认的.和..目录
    if ($file === '.' || $file === '..') continue;
    $file_ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
    if (in_array($file_ext, $allowed_ext)) {
        $image_list[] = $image_dir . $file;
    }
}

// 以JSON格式返回图片列表
header('Content-Type: application/json');
echo json_encode($image_list);
?>

2. 前端JS拉取列表渲染图片 #

在你现有HTML代码的</body>标签前加入如下JS代码：

<script>
window.addEventListener('load', async () => {
    const albumContainer = document.querySelector('.photoalbum');
    try {
        // 请求图片列表接口
        const response = await fetch('get_images.php');
        const images = await response.json();
        
        // 遍历生成图片元素插入页面
        images.forEach(imgPath => {
            const li = document.createElement('li');
            const img = document.createElement('img');
            img.src = imgPath;
            // 可自定义调整图片样式
            img.style.width = '200px';
            img.style.margin = '8px';
            li.appendChild(img);
            albumContainer.appendChild(li);
        })
    } catch (e) {
        console.error('图片列表加载失败：', e);
    }
})
</script>

注意事项 #

• 需保证图片存储目录有读取权限，XAMPP环境下如果出现权限报错，给对应photos/images目录开启可读权限即可
• 如果你需要修改图片存储目录，要同时修改上传逻辑中move_uploaded_file的存储路径和接口里的$image_dir参数，保持二者路径一致
• 也可以直接把图片列表的逻辑写在原有的album.php文件中，通过参数判断是处理上传还是返回列表，减少接口文件数量

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