« Gmailで改行が消える Main ワード文書で選択できない »

ファイル一覧をjQueryで表示

画像ファイルの一覧をjQueryで表示させる。その対象ファイル名の取得自体はJavaScriptでは対応できないので、別途phpに下請けに出す形にする。

<!-- index.html -->
<html>
<head>
<title>Image List</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<style type="text/css">
img {border: none;}
</style>
</head>

<body>
<div id="message"></div>
<div id="image_list"></div>
</body>

<script type="text/javascript">
$.getJSON("images_json.php", function(json) {
  for (var i=0; i<json.length; i++) {
    var fname=json[i].fname;
    $("#image_list").append("<img src="images/"+fname+"" alt=""+fname+"" title=""+fname+"" />");
  }
  $("#message").text(json.length+" images.");
});
</script>

上記にある「$.getJSON(“下請けphpスクリプト”, データ処理関数)」の形でデータ取得と表示。

で、ファイルリストを生成する下請け側のphpスクリプト（ファイル一覧を取得するディレクトリの指定は引数などにせず、とりあえずスクリプトへ埋め込み）：

<?php
// images_json.php: 画像ファイル一覧を取得しJSON形式で渡す

if ($handle=opendir("/fullpath/images/")) {
    $files=array();
    while (($fname = readdir($handle))!==false) {
        if (!preg_match('/.(jpe?g|gif|png|bmp|tiff?)$/i', $fname)) continue;
        array_push($files, array('fname'=>$fname));
    }
    closedir($handle);

    print json_encode($files);
}
?>

JSON形式の生成は、「キー=>値」の形で連想配列にし、それを一つずつarray_pushで納めていって、その配列をjson_encode()に掛ければ次のようなデータとなる：

[
  {"fname":"CIMG2782.JPG"},
  {"fname":"CIMG2780.JPG"},
  {"fname":"CIMG2785.JPG"},
    ...
]

参考リンク：

Related Posts

2012年6月6日 in 未分類 | tags: , , ,

Leave a comment

Your comment