1

我正在尝试制作一个实现 PHP 的 HTML5 幻灯片系统。我的想法首先是创建一个系统来检测文件夹中的图像，并将它们放入一个数组中，然后 jquery 将能够访问该数组以在幻灯片中实现。首先，我有一个 php 文件，它将检测文件夹中每个文件的名称，并将它们作为纯文本输出。

我怎样才能让 PHP 将文件名传输到一个数字数组，而不是作为纯文本输出，该数组可以与随后伴随它的 jquery 一起使用？

我打算使用 jquery 来访问然后生成的数字数组。这是怎么做到的？除非做不到，否则还能怎么做？

目标是能够将文件放在文件夹中，并且脚本能够动态识别文件的存在，并将它们合并到幻灯片中。然后，此幻灯片将输出到屏幕显示器，该屏幕显示器将用于等候区，以幻灯片形式展示我们学校的学校图像。

这是我到目前为止的代码：

<?php
    //Open images directory
    $dir = opendir("images");
    //List files in images directory
    while (($file = readdir($dir)) !== false)
    {
        echo "filename: " . $file . "<br />";
    }
    closedir($dir);
?>

在这一点上，我不知道如何让 PHP 与 Javascript “对话”。我希望有一些简单的方法，我想我想要的是 AJAX，但我不知道它是如何工作的。

4

7 回答 7

5

这里的答案是使用JSON，它是许多语言支持的 Javascript 子集，它允许您（以及许多其他事情）非常轻松地将结构化数据从外部源传递到 Javascript。PHP 有一个函数json_encode()允许您将 PHP 数据结构（通常是数组或对象）转换为 Javascript 可以轻松读取的格式。jQuery 还内置了对 JSON 的支持。

<?php

    // An array of the image file names
    $images = array();

    //Open images directory
    $dir = opendir("images");

    //List files in images directory
    while (($file = readdir($dir)) !== false)
    {
        $images[] = $file;
    }
    closedir($dir);

    echo json_encode($images);

?>

现在，在 jQuery 中你可以这样做：

$.getJSON('http://url/of/your/script.php', function(images) {
  // In here the variable "images" is an array identical to the one you constructed with PHP
});
于 2012-05-16T14:36:42.897 回答
2

是的，您可以使用 ajax 通过更改 php 代码来将图像文件名作为数组获取，如下所示

<?php
    //Open images directory
    $dir = opendir("images");
    $images = array(); 
    //List files in images directory
    while (($file = readdir($dir)) !== false)
    {
        //echo "filename: " . $file . "<br />";
        $images[] = $files;
    }
    closedir($dir);
    echo json_encode($images);
?>

然后使用$.getJSON o 获取该列表

    $.getJSON('path_to_above_php_file', function(images) {
       //all your files are in images array, you can loop through it to find individual files
   });
于 2012-05-16T14:40:23.970 回答
0

您可以拥有一个包含所有图片的数组，然后将此数组转换为 JSON。

于 2012-05-16T14:36:43.320 回答
0

为什么不将图像本身写入文档，而不是简单地存储图像的名称？所以像：

<?php
//Open images directory
$dir = opendir("images");
//List files in images directory
while (($file = readdir($dir)) !== false)
{
    $files[] = YOUR_URL_PATH.$file;
}
closedir($dir);
?>
...
<div id="slideshow">
<?php
foreach($files as $img)
    echo '<img class="slide" src="'.$img.'" />';
?>
</div>
...
<script type="text/javascript">
$(document).ready(function()
{
    alert($(".slide").length+" slides detected");
});
</script>

这样，您就可以使用 PHP 来定义 jQuery 正常运行所需的元素，而不是依赖 PHP 来定义您的 jQuery。

更新：

如果您的 PHP 和 Javascript 存在于同一页面上，并且您仍然希望能够使用 PHP 设置 Javascript 数组，那么我认为这就是您要寻找的：

<?php
//Open images directory
$dir = opendir("images");
//List files in images directory
while (($file = readdir($dir)) !== false)
{
    $files[] = YOUR_URL_PATH.$file;
}
closedir($dir);
?>
...
<script type="text/javascript">
$(document).ready(function()
{
    var fileArr = [<?php echo implode(',',$files); ?>];
});
</script>

这要求您的 Javascript 与定义文件数组的 PHP 位于同一页面上。如果您的 Javascript 旨在被外部引用，那么您最好的选择是使用这里许多其他答案提到的 JSON 数组。

于 2012-05-16T14:38:43.430 回答
0

我会说JSON非常适合您的情况。只需创建打印（回显）包含文件列表的 JSON 对象的 PHP 文件。您可以使用json_encode()创建 JSON 对象。在您的浏览器端，您可以发出 AJAX 请求（或简单地使用jQuery.getJSON()）并将数据类型设置为 JSON，您应该很高兴：

$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: callback
});

在这里，您可以阅读有关在 PHP 中使用 JSON 的信息。

于 2012-05-16T14:39:24.143 回答
0

有几种方法可以做到这一点，一种快速简便的方法是：

你的PHP：

$dir = opendir("images");
$store = array();
while (($file = readdir($dir)) !== false)
{
    $store[] = $file;
}
closedir($dir);

现在你有一个包含所有文件的数组（我可能会补充一点，你可能想要验证文件是图像！）。我喜欢将它们作为 json 字符串转储到 JS 中，因为这样可以省去我的麻烦。所以：

echo "<script> var allimages = jQuery.parseJSON('".addslashes(json_encode($store))."'); </script>";

现在，如果您console.log()使用 allimages 变量，您将看到其中包含所有图像，因此您可以根据需要使用“$.each”或类似名称。

于 2012-05-16T14:41:07.270 回答
0

SPL 库具有处理目录的功能

来自 PHP 网站：

用法示例：查看所有文件：

<?php
   $ite=new RecursiveDirectoryIterator($_POST['path']);

   $files = array();
   foreach (new RecursiveIteratorIterator($ite) as $filename=>$cur) {
       array_push($files, $filename);
   }
   echo json_encode($files);
?>

现在使用 jquery.post() 您可以检索文件夹中的文件列表。

于 2012-05-16T14:46:16.947 回答