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

Question

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

Answer 1

我不

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

跨域策略显然适用。

如果您使用的是 PHP，则应在目录上使用递归来获取完整的文件结构。PHP 有一个可以使用的扫描目录功能。

基本代码示例：

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);
}

注意：这还没有经过测试，如果它不起作用，请告诉我。

Answer 2

基本的 PHP 示例：

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

Answer 3

除非目录有索引或您事先知道文件名，否则使用纯 javascript 是不可能的。仍然使用php的替代方法如下：

• 向以数据作为目录名称的 php 文件发送 ajax 请求

• 然后PHP文件使用opendir、readdir、scandir等命令访问目录内容。请参阅此SO问题或此链接以获取有关通过php readdir/scandir命令或this（通过glob）读取目录的更多详细信息

• PHP 文件将文件名（此处为图像名称）作为 json 对象返回。

• 在客户端，ajax 响应作为 json 对象出现。

• 做！您拥有该文件夹中的所有图像。