如何将获取目录图片的Ajax实现替换为PHP glob实现

你遇到的403报错是因为Web服务器默认关闭了目录索引功能，直接请求./Cam02/目录时不会返回文件列表，用PHP glob在服务端读取目录文件列表的方案完全可以避开这个权限限制，整合步骤如下：

步骤1：新建PHP接口文件 #

在你的HTML页面同级目录下创建get_images.php文件，代码如下：

<?php
// 图片存储目录
$imageDir = './Cam02/';
// 支持的图片格式，可自行扩展
$allowedExt = ['jpg', 'jpeg', 'png'];
$images = [];

// 遍历匹配所有符合格式的图片
foreach ($allowedExt as $ext) {
    $matches = glob($imageDir . '*.' . $ext);
    if (!empty($matches)) {
        foreach ($matches as $file) {
            // 只保留文件名，剔除路径前缀
            $images[] = basename($file);
        }
    }
}

// 按文件修改时间倒序排列，最新的图片排在最前，满足初始展示最新图的需求
usort($images, function($a, $b) use ($imageDir) {
    return filemtime($imageDir . $b) - filemtime($imageDir . $a);
});

// 返回JSON格式的文件列表给前端
header('Content-Type: application/json');
echo json_encode($images);
?>

步骤2：修改原有JS代码 #

仅需要替换getFiles()函数的实现逻辑即可，图片切换、自动播放的原有逻辑完全不需要改动，修改后的完整JS代码如下：

<script>
$(function() {
    var baseUrl = "./Cam02/";
    var pictureIndex = 0;
    var pictures = [];
    
    function getFiles() {
        // 替换为请求PHP接口拿文件列表
        $.getJSON('./get_images.php', function(data) {
            pictures = data;
            console.log(pictures.length + " pictures loaded!");
            changePicture(0);
        });
    }
    function changePicture(indexOffset) {
        pictureIndex += indexOffset;
        if (pictureIndex >= pictures.length) {
            pictureIndex = 0;
        } else if (pictureIndex < 0) {
            pictureIndex = pictures.length - 1;
        }
        $('#viewer').attr('src', baseUrl + pictures[pictureIndex]);
        $('#info').text((pictureIndex + 1) + "/" + pictures.length);
    }

    getFiles();
    
    var playbackview;
    
    $('#btnLeft').click(function() {
    $("#btnPlayit").show();
    clearInterval(playbackview);
    var left = -1;
    changePicture(left); return false;
    });

    $('#btnPlayit').click(function() {
    playbackview = setInterval(function(){
    var left = -1;
    changePicture(left); return false;
    },500); <!-- 1 second = 1000 -->
    $(this).hide();
    });

    $('#btnRight').click(function() {
    $("#btnPlayit").show();
    clearInterval(playbackview);
    var right = 1;
    changePicture(right); return false;
    });
    
    $(document).keydown(function(e){
        var left = -1, right = 1;
        if (e.keyCode == 37) {
           changePicture(left); return false;
        } else if (e.keyCode == 39) {
            changePicture(right); return false;
        }
    });
    
});
</script>

注意事项 #

• 确保./Cam02/目录的读取权限正常，PHP进程有权限读取该目录下的文件
• 需要新增支持的图片格式时，直接修改get_images.php中的$allowedExt数组即可

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