jQuery/JavaScript を使用してフォルダーから Web ページに画像を読み込む方法

jQuery/Javascript を使用してフォルダーから Web ページに画像をロードする

「images」という名前のフォルダーから HTML ページに画像をロードするにはでは、JavaScript または jQuery を使用できます。画像名が連番でなくても、解決策はあります。

解決策:

<code class="js">var folder = "images/";

$.ajax({
    url : folder,
    success: function (data) {
        $(data).find("a").attr("href", function (i, val) {
            if( val.match(/\.(jpe?g|png|gif)$/) ) {
                $("body").append( "<img src='"+ folder + val +"'>" );
            }
        });
    }
});</code>

説明:

• 行 1: .js ファイルに対する相対フォルダー パスを定義します。
• 行 3 ～ 8: jQuery の $.ajax() 関数を使用して、フォルダーの内容をロードします。成功すると、$(data) を使用して HTML 応答を解析します。
• 行 6 ～ 7: 通常のメソッドを使用して、画像ファイル拡張子と一致する href を持つアンカー タグ () を見つけます。式。
• 8 行目: を追加します。一致した各画像ファイルのページにタグを追加します。

考慮事項:

• Apache サーバー: 「オプション インデックス」を有効にするまたは、Express.js の「serve-index」などのパッケージを使用して、ディレクトリの一覧表示を許可します。
• Node.js サーバー: 次のコードを使用して、フォルダーの一覧表示を有効にします:

<code class="js">app.use('/images', serveIndex(path.join(__dirname, '/images')));</code>

このアプローチを使用すると、名前に関係なく、すべての画像を「画像」フォルダーから Web ページに簡単に読み込むことができます。

以上がjQuery/JavaScript を使用してフォルダーから Web ページに画像を読み込む方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。