在从目录获取图像时将 ajax 替换为 glob

Question

我有 html 页面显示目录中的图像。该脚本计算当前目录中的所有图像并显示最新的，左右按钮将导航数组中的下一个或上一个图像。函数 getfiles() 让我很头疼，并返回 403。我的解决方案是使用 glob，问题是我如何集成一个 php 函数来处理我当前的设置？

我当前的脚本（getfiles ajax 不工作）：

<script>
$(function() {
    var baseUrl = "./Cam02/";
    var pictureIndex = 0;
    var pictures = [];
    
    function getFiles() {
        $.ajax(baseUrl).success(function(data) {
            pictures = [];
            $(data).find("a[href]").each(function() {
                var href = $(this).attr('href');
                if (href.indexOf('.jpg') > 0 || href.indexOf('.png') > 0 || href.indexOf('.jpeg') > 0) {
                    pictures.push(href);
                }
            });
            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>

php 我想使用：

<?php

$dir = "./Cam02/*.jpg";
$images = glob( $dir );

?>

Answer 1

我认为您的 php 只搜索与给定字符串匹配的文件。（阅读更多关于 glob function 返回的内容）您可以计算数组 $images 中的项目，然后将该响应传回您的脚本：

echo count($images);

但对于您的情况，您希望使用图像名称来加载图像。所以您将创建一个变量并用文件路径详细信息填充它：

$imagesData="";
foreach($images as $key=> $value){
    $imageData.=$value.",";
}
echo $imageData;

这将创建一串图像文件路径。现在从您的 js 中，您将使用 split() 函数创建一个图像数组：

function getFiles() {
        $.ajax(baseUrl).success(function(data) {
             pictures = data.split(",");
            console.log(pictures.length + " pictures loaded!");
            changePicture(0);
        });
    }

Answer 2

据我了解，您正在使用 Apache 目录列表功能列出图像，并且您收到 403 错误，因为目录列表在所需目录上被禁用。您可以通过使用浏览器导航到该目录来验证这一点；如果您仍然收到 403，那么一个简单的解决方案可能是在该目录中添加一个名为“.htaccess”的文件，内容如下：

Options +Indexes

如果您可以使用浏览器列出目录，则服务器可能拒绝 ajax 函数的某些默认 header；要对此进行调查，您必须查看 Apache 错误日志。

一个更强大的解决方案是开发一个简单的网络服务来列出目录内容，假设您将其称为“list_images.php”，内容如下：

<?php
$dir = "./Cam02/*.jpg";
$images = glob( $dir );
header('Content-Type: application/json');
echo json_encode($images);
?>

那么您必须这样更改 getFiles 函数：

function getFiles() {
    $.ajax("list_images.php").success(function(data) {
        pictures = JSON.parse(data);
        console.log(pictures.length + " pictures loaded!");
        changePicture(0);
    });
}

在从目录获取图像时将 ajax 替换为 glob

Replace ajax to glob in getting images from directory

php

console

jquery

glob