Wie lade ich mit jQuery/Javascript Bilder aus einem Ordner in Ihre Webseite?

Bilder aus einem Ordner in eine Webseite mit jQuery/Javascript laden

Zum Laden von Bildern aus einem Ordner namens „images“ in eine HTML-Seite , können Sie JavaScript oder jQuery verwenden. Auch wenn die Bildnamen keine fortlaufenden Nummern sind, gibt es eine Lösung.

Lösung:

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

Erklärung:

• Zeile 1: Definiert den Ordnerpfad relativ zu Ihrer .js-Datei.
• Zeile 3-8: Verwendet die $.ajax()-Funktion von jQuery, um Laden Sie den Ordnerinhalt. Bei Erfolg wird die HTML-Antwort mit $(data) analysiert.
• Zeile 6-7: Findet Anker-Tags () mit hrefs, die mit einer regulären Bilddateierweiterung übereinstimmen Ausdruck.
• Zeile 8: Hängt an. Tags zur Seite für jede übereinstimmende Bilddatei.

Überlegungen:

• Apache Server: Aktivieren Sie „Optionsindizes“ oder verwenden Sie ein Paket wie „serve-index“ für Express.js, um Verzeichnislisten zu ermöglichen.
• Node.js-Server: Verwenden Sie den folgenden Code, um Ordnerlisten zu aktivieren:

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

Mit diesem Ansatz können Sie ganz einfach alle Bilder aus Ihrem „Bilder“-Ordner in Ihre Webseite laden, unabhängig von ihrem Namen.

Das obige ist der detaillierte Inhalt vonWie lade ich mit jQuery/Javascript Bilder aus einem Ordner in Ihre Webseite?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!