Comment charger dynamiquement des images à partir d'un dossier à l'aide de jQuery/JavaScript ?

Charger des images à partir d'un dossier à l'aide de jQuery/JavaScript

Obtenir une liste de tous les fichiers image d'un dossier donné et les afficher sur un la page Web peut être une tâche courante dans le développement frontend. Pour ce faire, vous pouvez utiliser de puissantes techniques JavaScript et jQuery.

Chargement d'images à partir du dossier "images"

Considérez un scénario dans lequel vous disposez d'un dossier nommé "images". " contenant des fichiers image. Pour charger toutes les images de ce dossier dans votre page HTML à l'aide de jQuery/JavaScript, suivez ces étapes :

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

Cet extrait de code exploite AJAX pour récupérer le contenu du dossier "images". Il analyse ensuite les données de réponse, filtre les fichiers avec des extensions d'image et ajoute dynamiquement des images au corps du document à l'aide de jQuery.

Remarques :

• Assurez-vous que l'option Option Indexes est activée sur le serveur Apache si vous exécutez votre code localement.
• Pour les serveurs comme Express for Node, vous devrez peut-être installer le package NPM serve-index pour activer la liste des dossiers.

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!