Bagaimana untuk Memuatkan Imej Secara Dinamik dari Folder Menggunakan jQuery/JavaScript?

Memuatkan Imej Secara Dinamik dari Folder Menggunakan jQuery/JavaScript

Menavigasi folder untuk memuatkan aset seperti imej boleh mencabar apabila namanya bukan- berurutan. Walau bagaimanapun, jQuery menyediakan penyelesaian untuk mendapatkan dan memaparkan imej dari mana-mana direktori.

Penyelesaian:

Melaksanakan penyelesaian ini melibatkan penggunaan panggilan AJAX untuk mengambil kandungan sasaran folder:

<code class="javascript">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>

Pendekatan ini menggunakan jQuery untuk menghuraikan respons HTML daripada panggilan AJAX. Ia kemudian melelang ke atas tag anchor dalam respons, menapis hanya yang berakhir dengan sambungan fail imej yang disokong. Akhir sekali, ia menambahkan laluan imej yang disahkan ini secara dinamik ke DOM.

Nota:

Untuk penyelesaian ini berfungsi dengan berkesan, adalah penting untuk mengkonfigurasi pelayan anda untuk membenarkan penyenaraian folder . Dalam pelayan Apache, pilihan "Indeks" harus didayakan. Untuk Express.js dan Node.js, pakej luaran bernama "serve-index" boleh digunakan untuk mencapai kefungsian yang sama.

Atas ialah kandungan terperinci Bagaimana untuk Memuatkan Imej Secara Dinamik dari Folder Menggunakan jQuery/JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!