Niths Niths - 10 months ago 66
HTML Question

How do i get images file name from a given folder

I have got a task to display all images inside a folder using jquery.

For that i used the code

var imageFolder = '../../Images/Avatar/';
var imgsrc = imageFolder +'';


I need to get the images file name inside that folder avatar. How can I get the file name. There are lot of image files in that avatar folder also has some txt files.I only need jpg,png,gif images only.

Answer Source

try this way

HTML CODE:

<div id='fileNames'> </div>

JQUERY CODE:

var fileExt = {};
    fileExt[0]=".png";
    fileExt[1]=".jpg";
    fileExt[2]=".gif";
$.ajax({
    //This will retrieve the contents of the folder if the folder is configured as 'browsable'
    url: '../../Images/Avatar/',
    success: function (data) {
       $("#fileNames").html('<ul>');
       //List all png or jpg or gif file names in the page
       $(data).find('a:contains(" + fileExt[0] + "),a:contains(" + fileExt[1] + "),a:contains(" + fileExt[2] + ")').each(function () {
           var filename = this.href.replace(window.location.host, "").replace("http:///", "");
           $("#fileNames").append( '<li>'+filename+'</li>');
       });
       $("#fileNames").append('</ul>');
     }     
  });

Solution referred from original SO question from Here

Happy Coding :)