サーバー上のとあるディレクトリ中の画像ファイルの一覧を取得したいと思います。
サーバー側で処理すればカンタンなのは分かっているのですが、
都合があってクライアント側で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】複数の画像の読み込...
-
divの背景画像を、徐々に表示さ...
-
一定時間ごとにgif画像の切...
-
Javaにて画像を残像が残りつつ...
-
MAX関数を使ってからLEFT JOIN...
-
htmlの記述で link rel=styles...
-
画像の上に画像リンクを貼る方法
-
javascriptテキストBOX色を元に...
-
読み込んだQRコードをフォーム...
-
複数画像のランダム複数表示(...
-
【CSS】floatで左右に並べた...
-
Gifアニメ、最後のコマに行った...
-
Slick.jsのオプションrtlについて
-
クリックして変更した画像を他...
-
文字と数字が混在する要素のsor...
-
マウスを乗せるとメニュー表示
-
[急ぎ] videoタグで埋め込んだm...
-
画像ランダム表示、しかしダブ...
-
JavaScriptでサイコロのような...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
window.openで値の渡し方を教え...
-
jQueryでサーバー上のファイル...
-
【jQuery】複数の画像の読み込...
-
複数のバナーをリロードする度...
-
jQueryで画像を重ねる
-
一定時間ごとにgif画像の切...
-
画像をクリックすると別ウイン...
-
JavaScriptで画面サイズによっ...
-
HTMLページ内のタグに対しての...
-
【javascript】ロールオーバー...
-
HPに複数の画像をクリックで切...
-
連続したURLへのwindow.openの...
-
リンク切の場合リンクしない
-
画像と文字を同時に切り替えたい
-
JavaScriptで画像置換えてクリ...
-
画像の入れ替え
-
javascriptによるランダム画像...
-
<img>タグの alt= の値をキャプ...
-
outlook2010の不具合で困ってい...
-
複数のボールの落下、バウンド...
おすすめ情報