Как отобразить все изображения каталога в JavaScript?

Question

Я хочу отображать все изображения из каталога динамически с помощью JavaScript. Как я могу это сделать?

Answer 1

Я не верю, что это возможно, но если вы сделаете запрос AJAX на страницу ASP.NET или PHP (или аналогичную), они могут перечислить файлы в папке и вернуть их для отображения 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

Вы забыли ' в конце эхо-тега:

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

Answer 4

Делать это с использованием исключительно javascript невозможно, если в каталоге нет индексов или вы заранее не знаете имен файлов. Еще одна альтернатива с использованием php заключается в следующем:

• Отправить ajax- запрос в php-файл с данными в качестве имени каталога

• Затем PHP-файл обращается к содержимому каталога, используя opendir, readdir, scandir и т.д. команды. См. Этот вопрос SO или эту ссылку для более подробной информации о чтении каталога с помощью команд php readdir/scandir или этого (glob)

• Файл PHP возвращает имена файлов (в данном случае имена изображений) в виде объекта json.

• На стороне клиента ответ ajax приходит как объект json.

• Готово! У вас есть все изображения в этой папке.