如何将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

根据我的理解，您正在使用Apache目录列表函数列出图像，并且您得到403错误，因为在所需目录上禁用了目录列表。你可以通过浏览器导航到那个目录来验证;如果您仍然得到403，那么一个简单的解决方案是添加一个名为"。htaccess"的文件。在该目录中，包含以下内容:

Options +Indexes

如果你可以使用浏览器列出目录，可能服务器拒绝了ajax函数的一些默认头;要调查这个问题，你必须查看Apache的错误日志。

一个更健壮的解决方案是开发一个简单的web服务来列出目录内容，比如你把它命名为"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);
});
}

Answer 2

我认为你的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);
});
}