php - 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。php readdir/scandir コマンドまたはthis (by glob) によるディレクトリの読み取りの詳細については、このSO の質問またはこのリンクを参照してください。

• PHP ファイルは、ファイル名 (ここでは画像名) を json オブジェクトとして返します。

• クライアント側では、ajax 応答は json オブジェクトとして送信されます。

• 終わり！そのフォルダにすべての画像があります。