How do i get images file name from a given folder

Question

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.

So I am guessing: The directory you want to do a listing of files with `jpeg`, `png` and `gif` extensions for resides on some **server** which exposes them via web server. You have to get references to the files for some reason on the **client side**. Do you need the path or the URI of the files? Is there some sort of directory listing readily available from your web server? — marionebl, Feb 27 '14 at 07:21

dreamweiver · Accepted Answer · 2017-07-04T09:02:46.100

6

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

Basic logic referred from this SO question Here

Happy Coding :)

edited Jul 04 '17 at 09:02

answered Feb 27 '14 at 07:22

dreamweiver

6,002
2
24
39

@NithinViswanathan:yes , did you try this logic ? – dreamweiver Feb 27 '14 at 08:23
1

( '
'+filename+<'/li'>); should be ( '
'+filename+'

user1432290

Sep 24 '16 at 15:16

Yeah that was a typo. – dreamweiver Sep 24 '16 at 16:12

It's not working – Zain Shabir Apr 17 '20 at 04:26

I am getting syntax error ' [ ' – Zain Shabir Apr 17 '20 at 04:26

@ZainShabir: it was untested code, they could be some compile-time errors due to typo mistake. why don't you create a working copy on stackblitz and share here – dreamweiver Apr 17 '20 at 06:32

score 2 · Answer 2 · answered Feb 27 '14 at 07:03

2

I don't know that it will work or not but you can try this

Give the name of image 1,2,3,4.....

and than show image using for loop like.

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

var imgsrc="";

for(var i=1; i <= totalImage; i++){
 imgsrc= imageFolder +i;

}

answered Feb 27 '14 at 07:03

user2075328

423
2
7
16

The images name will be different.. not be 1 2 3 like.. – Nithin Viswanathan Feb 27 '14 at 07:06

How do i get images file name from a given folder

2 Answers2