Comment charger des images d'un dossier dans votre page Web avec jQuery/Javascript ?

Chargement d'images d'un dossier dans une page Web avec jQuery/Javascript

Pour charger des images d'un dossier nommé "images" dans une page HTML , vous pouvez utiliser JavaScript ou jQuery. Même si les noms des images ne sont pas des nombres séquentiels, il existe une solution.

Solution :

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

Explication :

• Ligne 1 : Définit le chemin du dossier par rapport à votre .js file.
• Ligne 3-8 : Utilise la fonction $.ajax() de jQuery pour charger le contenu du dossier. En cas de succès, il analyse la réponse HTML à l'aide de $(data).
• Ligne 6-7 : Localise les balises d'ancrage () avec des hrefs qui correspondent aux extensions de fichier image à l'aide d'un expression.
• Ligne 8 : Ajoute balises sur la page pour chaque fichier image correspondant.

Considérations :

• Serveur Apache : Activer les « index d'options » ou utilisez un package comme "serve-index" pour Express.js pour autoriser le répertoire listes.
• Serveur Node.js : Utilisez le code suivant pour activer les listes de dossiers :

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

En utilisant cette approche, vous pouvez facilement charger tous images de votre dossier "images" dans votre page Web, quel que soit leur nom.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!