时间戳

首页 > 解决方案 > 将 ajax 替换为 glob 以从目录获取图像

php - 将 ajax 替换为 glob 以从目录获取图像

问题描述

我有一个显示目录中图像的 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 );

?>

标签： phpjqueryconsoleglob

解决方案

我认为您的 php 仅搜索与给定字符串匹配的文件。（在此处阅读有关glob 函数返回的更多信息）您可以计算数组 $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);
        });
    }

推荐阅读