Rumah >hujung hadapan web >tutorial js >Bagaimana untuk Memuatkan Imej Secara Dinamik dari Folder Menggunakan jQuery/JavaScript?

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

Susan Sarandon
Susan Sarandonasal
2024-11-03 19:04:03671semak imbas

How to Load Images Dynamically from a Folder Using 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn