How to load all the images from one of my folder into my web page, using Jquery/Javascript How to load all the images from one of my folder into my web page, using Jquery/Javascript jquery jquery

How to load all the images from one of my folder into my web page, using Jquery/Javascript


Works both localhost and on live server without issues, and allows you to extend the delimited list of allowed file-extensions:

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 +"'>" );            }         });    }});

NOTICE

Apache server has Option Indexes turned on by default - if you use another server like i.e. Express for Node you could use this NPM package for the above to work: https://github.com/expressjs/serve-index

If the files you want to get listed are in /images than inside your server.js you could add something like:

const express = require('express');const app = express();const path = require('path');// Allow assets directory listingsconst serveIndex = require('serve-index'); app.use('/images', serveIndex(path.join(__dirname, '/images')));


Use :

var dir = "Src/themes/base/images/";var fileextension = ".png";$.ajax({    //This will retrieve the contents of the folder if the folder is configured as 'browsable'    url: dir,    success: function (data) {        //List all .png file names in the page        $(data).find("a:contains(" + fileextension + ")").each(function () {            var filename = this.href.replace(window.location.host, "").replace("http://", "");            $("body").append("<img src='" + dir + filename + "'>");        });    }});

If you have other extensions, you can make it an array and then go through that one by one using in_array().

P.s : The above source code is not tested.


This is the way to add more file extentions, in the example given by Roy M J in the top of this page.

var fileextension = [".png", ".jpg"];$(data).find("a:contains(" + (fileextension[0]) + "), a:contains(" + (fileextension[1]) + ")").each(function () { // here comes the rest of the function made by Roy M J   

In this example I have added more contains.