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

Memuatkan Imej dari Folder Menggunakan jQuery/JavaScript

Mendapatkan senarai semua fail imej dalam folder tertentu dan memaparkannya pada halaman web boleh menjadi tugas biasa dalam pembangunan frontend. Untuk mencapainya, seseorang boleh menggunakan teknik JavaScript dan jQuery yang berkuasa.

Memuatkan Imej daripada Folder "imej"

Pertimbangkan senario di mana anda mempunyai folder bernama "imej " yang mengandungi fail imej. Untuk memuatkan semua imej daripada folder ini ke dalam halaman HTML anda menggunakan jQuery/JavaScript, ikut langkah berikut:

<code class="javascript">// Define the folder path
var folder = "images/";

// Use AJAX to retrieve the folder contents
$.ajax({
    url: folder,
    success: function (data) {
        // Parse the response data
        $(data).find("a").attr("href", function (i, val) {
            // Check if the file is an image
            if (val.match(/\.(jpe?g|png|gif)$/)) {
                // Append the image to the body of the page
                $("body").append("<img src='" + folder + val + "'>");
            }
        });
    }
});</code>

Coretan kod ini memanfaatkan AJAX untuk mendapatkan semula kandungan folder "imej". Ia kemudian menghuraikan data respons, menapis untuk fail dengan sambungan imej dan menambahkan imej secara dinamik pada badan dokumen menggunakan jQuery.

Nota:

• Pastikan bahawa pelayan Apache mempunyai pilihan Indeks Pilihan didayakan jika anda menjalankan kod anda secara setempat.
• Untuk pelayan seperti Express for Node, anda mungkin perlu memasang pakej NPM indeks servis untuk mendayakan penyenaraian folder.

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!