Niths Niths - 2 months ago 22
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

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

Comments