jQueryでサーバー上のファイル一覧取得

解決済

質問者：ogu-ne
質問日時：2013/08/28 21:06
回答数：1件

サーバー上のとあるディレクトリ中の画像ファイルの一覧を取得したいと思います。
サーバー側で処理すればカンタンなのは分かっているのですが、
都合があってクライアント側でjQueryを使って処理したいのです。

幸いファイル数は有限で、名前には規則性があるので、
ひとつひとつ見に行って、あればそのファイル名をHTMLに出力する、
というやりかたができるのではないかと考えました。

たとえば、サーバー上の画像ファイルの名前は
IMG_1.jpg
IMG_3.jpg
IMG_25.jpg
のような感じなので、

var ImageName = '';
for (var i = 0; i < 10; i++) {
　　ImageName = 'IMG_' + String(i + 1) + '.jpg';

　　// このImageNameを使って読みにいく
　　// 成功すればその名前をhtml上に出力する

　　// しかし、どんな関数を使えばよい？
}

のようなループを使えばできそうに思うのですが、
どのようにすれば実現可能でしょうか。

よろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： fujillin
回答日時：2013/08/29 10:22

＞ひとつひとつ見に行って、あればそのファイル名をHTMLに出力する

およそ効率的な方法とは思えませんが、方法としては可能でしょう。

一例として。
（全角空白は半角に）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
.imageBox, .imageBox li{ list-style-type:none; matgin:0; padding:0; }
.imageBox li{ float:left; margin:5px; }
.imageBox img{ height:150px; width:150px; }
.imageBox p{ margin:0; }
</style>
</head>
<body>

<script type="text/javascript">
(function(){
　var ul = document.createElement("ul");
　var li = document.createElement("li");
　var caption = document.createElement("p");
　var i, name, img, e, cap;
　ul.className = "imageBox";
　li.style.display = "none";

　for(i=0; i<30; i++){
　　e = li.cloneNode(true);
　　cap = caption.cloneNode(true);
　　img = new Image();
　　e.appendChild(img);
　　e.appendChild(cap);
　　ul.appendChild(e);

　　name = "IMG_" + i + ".jpg";
　　cap.appendChild(document.createTextNode(name));
　　img.alt = "";
　　img.onload = (function(elm){
　　　return function(){ elm.style.display = ""; }
　　})(e);
　　img.src = name;
　}

　document.body.appendChild(ul);
})();
</script>

</body>
</html>

- 1
- 件

通報する

この回答へのお礼

回答をありがとうございます。
お礼が遅くなりすみません。
大変急ぎだったもので、今回はまったく別の手段で対応したのですが、
本番までは次官の余裕があるので、
提示いただいたソースを参考にして作り直してみようと思います。
（できればサーバー側で処理させてもらえるように話を持って行きたいのですが...。）
どうもありがとうございました。

通報する

お礼日時：2013/09/01 12:56

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！