サーバー上のとあるディレクトリ中の画像ファイルの一覧を取得したいと思います。
サーバー側で処理すればカンタンなのは分かっているのですが、
都合があってクライアント側で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上に出力する
// しかし、どんな関数を使えばよい?
}
のようなループを使えばできそうに思うのですが、
どのようにすれば実現可能でしょうか。
よろしくお願い致します。
No.1ベストアンサー
- 回答日時:
>ひとつひとつ見に行って、あればそのファイル名を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>
回答をありがとうございます。
お礼が遅くなりすみません。
大変急ぎだったもので、今回はまったく別の手段で対応したのですが、
本番までは次官の余裕があるので、
提示いただいたソースを参考にして作り直してみようと思います。
(できればサーバー側で処理させてもらえるように話を持って行きたいのですが...。)
どうもありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- その他(開発・運用・管理) フォルダの中にファルダを作成してファイルを格納するバッチコマンド 1 2022/06/30 11:39
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- Excel(エクセル) エクセル VBA For Next 繰り返しの書き方を教えてください 6 2022/09/01 14:11
- PHP 画像ファイルの名前をそのままURLにする 3 2022/10/16 11:18
- Visual Basic(VBA) 【VBA】写真の縦横比を変えずに貼り付ける 5 2023/06/13 11:42
- その他(ソフトウェア) コマンドプロンプトについて教えてください。 状況: 画像編集ソフト上でネットから保存した画像を使うの 3 2022/05/26 11:14
- Excel(エクセル) EXCELのグラフを画像(JPG形式)で保存、通常実行がうまく行かない。ステップインはうまく行く 3 2022/08/30 12:06
- HTML・CSS サルワカさんの吹き出しのスタイルシートについて。 https://saruwakakun.com/h 2 2022/10/28 22:55
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
【jQuery】複数の画像の読み込...
-
HPに複数の画像をクリックで切...
-
JavaScriptを外部ファイルにす...
-
リンク切の場合リンクしない
-
JavaScriptで画像置換えてクリ...
-
画像の入れ替え
-
画像をクリックすると別ウイン...
-
MAX関数を使ってからLEFT JOIN...
-
スタイルシートで画面を上下に...
-
JavaScript スライドの画像にリ...
-
textareaに画像を表示したい
-
アコーディオンメニューの開閉制御
-
javascriptでスタイルを動的に...
-
キャラクターがぴょこんと飛び...
-
OpenCV での画素値の比較について
-
HTMLで条件分岐はできますか?
-
Ctrl+F(検索)の窓を出したいの...
-
色の変更
-
javascriptで、クリックしたら...
-
c++std::string型をTCHARに変換...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
window.openで値の渡し方を教え...
-
JavaScriptで画面サイズによっ...
-
jQueryでサーバー上のファイル...
-
画像と文字を同時に切り替えたい
-
インラインフレームでのクッキ...
-
setAttributeによる画像の差し替え
-
【jQuery】複数の画像の読み込...
-
JAVAで画像をボタンで切り替え...
-
画像の座標位置取得
-
連番画像「次へ」「前へ」で、...
-
imgのsrcに値を設定するには
-
画像をクリックすると別ウイン...
-
複数のボールの落下、バウンド...
-
連続したURLへのwindow.openの...
-
JavaScriptで画像置換えてクリ...
-
<img src"○.jpg">の○をランダム...
-
スライドショーにフェード効果...
-
jQueryで画像を重ねる
-
クリッカブルマップでリモート...
-
複数のバナーをリロードする度...
おすすめ情報