如何在javascript中显示目录的所有图像？答案

【问题标题】：How to display all images of a directory in javascript?如何在javascript中显示目录的所有图像？
【发布时间】：2012-06-12 04:36:13
【问题描述】：

我想在 javascript 的帮助下动态显示目录中的所有图像。我该怎么做？

【问题讨论】：

只有在您已经知道目录中的图像时才有可能。
由于这也在 php 中被标记，我假设您正在为您的应用程序使用它。我不是 php 程序员，但我想您将不得不使用 php 遍历目录并使用 json 将集合传递给您的客户端，此时您可以动态构建图像标签。我用 asp.net 做过类似的事情，但你需要一个 php 编码器来帮助你处理语法。
我们可以在javascript中获取目录中的文件名吗？
确定你不想为此使用 php，似乎是最好的选择
@Vivek：为什么你的问题用 PHP 标记？如果你想使用javascript循环文件？我不认为使用客户端javascript是可能的。你肯定需要查看 node.js，它提供了一个方法 nodejs.org/docs/v0.3.1/api/fs.html#fs.readdir 。 stackoverflow.com/questions/2727167/…

标签： php javascript jquery directory-traversal

【解决方案1】：

我不相信这是可能的，但是如果您向 ASP.NET 或 PHP（或类似）页面发出 AJAX 请求，他们可以列出文件夹中的文件并将其返回以供 Javascript 显示。

跨域策略显然适用。

如果您使用的是 PHP，您应该对目录使用递归来获得完整的文件结构。 PHP 有一个Scan Directory Function 可以使用。

基本代码示例：

function listdir($folder) {
    if (!is_dir($folder)) {
        return array(); //empty if not a folder
    }
    $return = scandir($folder);
    $subfolders = array();
    array_shift($return); //first two values are always .. & .
    array_shift($return);
    foreach ($return as $key => $value) {
        if (is_dir($value)) {
            unset($return[$key]);
            $subfolders[$value] = listdir($value); //recursively analyse the subdirectory
        }
    }
    return array_merge(array_values($return), $subfolders);

}

注意：这个没有测试过，如果不行请告诉我。

【讨论】：

【解决方案2】：

基本 PHP 示例：

<?php

foreach(glob("/path/to/images/{*.gif,*.jpg,*.png,*.jpeg,*.bmp}", GLOB_BRACE) as $image){
    echo '<img src="'.$image.'">';
}

【讨论】：

【解决方案3】：

除非目录有索引或您事先知道文件名，否则无法使用纯 javascript 执行此操作。使用php的另一种方法如下：

向一个php文件发送ajax请求，数据为目录名
然后 PHP 文件使用opendir、readdir、scandir 等命令访问目录内容。有关通过 php readdir/scandir 命令或 this(by glob)

SO question

this link

PHP 文件将文件名（此处为图像名称）作为 json 对象返回。
在客户端，ajax 响应以 json 对象的形式出现。
完成！您拥有该文件夹中的所有图像。

【讨论】：

如果目录有索引，纯JS是可能的。可以ajax请求索引，用JS解析。
哦，我以为它没有索引，反正编辑了答案