Bagaimana untuk Memuatkan Imej Secara Dinamik dari Direktori dengan Nama Fail Bukan Berturut-turut Menggunakan jQuery/JavaScript?

Memuatkan Imej Secara Dinamik daripada Direktori Menggunakan jQuery/JavaScript

Soalan:

Saya perlukan untuk memuatkan berbilang imej daripada folder bernama "imej" ke dalam halaman web saya. Walau bagaimanapun, nama fail imej bukan integer berturut-turut. Bagaimanakah saya boleh mencapai ini menggunakan jQuery atau JavaScript?

Jawapan:

Coretan kod berikut akan memuatkan semua imej daripada folder "imej" ke dalam badan Halaman HTML:

<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>

Penjelasan:

Kod bermula dengan mencipta pembolehubah folder yang memegang laluan ke folder "imej". Kemudian, ia menggunakan fungsi jQuery $.ajax() untuk memuatkan kandungan folder. Fungsi panggil balik kejayaan berulang melalui data yang dikembalikan untuk menyemak sama ada sambungan fail sepadan dengan jenis fail yang diterima (.jpg, .jpeg, .png, .gif). Jika ia berlaku, fungsi mencipta elemen imej dengan atribut sumber yang sesuai dan menambahkannya pada badan halaman.

Nota:

• Kod ini menganggap bahawa pelayan Apache mempunyai ciri Indeks Pilihan dihidupkan.
• Untuk pelayan lain seperti Express for Node, pakej NPM 'serve-index' boleh digunakan untuk membenarkan penyenaraian direktori.
• The kod boleh dikembangkan dengan menambahkan lebih banyak jenis fail yang diterima atau dengan mengubah suai konfigurasi pelayan untuk membenarkan penyenaraian direktori.

Atas ialah kandungan terperinci Bagaimana untuk Memuatkan Imej Secara Dinamik dari Direktori dengan Nama Fail Bukan Berturut-turut Menggunakan jQuery/JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!