How to Load Images from a Folder into Your Web Page with jQuery/Javascript?

Loading Images from a Folder into Web Page with jQuery/Javascript

To load images from a folder named "images" into an HTML page, you can use JavaScript or jQuery. Even if the image names are not sequential numbers, there's a 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>

Explanation:

• Line 1: Defines the folder path relative to your .js file.
• Line 3-8: Uses jQuery's $.ajax() function to load the folder content. On success, it parses the HTML response using $(data).
• Line 6-7: Locates anchor tags () with hrefs that match image file extensions using a regular expression.
• Line 8: Appends tags to the page for each matched image file.

Considerations:

• Apache Server: Enable "Option Indexes" or use a package like "serve-index" for Express.js to allow directory listings.
• Node.js Server: Use the following code to enable folder listings:

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

By using this approach, you can easily load all images from your "images" folder into your web page, regardless of their names.

The above is the detailed content of How to Load Images from a Folder into Your Web Page with jQuery/Javascript?. For more information, please follow other related articles on the PHP Chinese website!