如何从指定文件夹中获取图像文件名

Question

我有一个任务，要使用jQuery显示文件夹中的所有图像。

为此，我使用了以下代码。

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

我需要获取文件夹“avatar”中的图像文件名。如何获取文件名？该文件夹中有很多图像文件，还有一些txt文件。我只需要jpg、png、gif格式的图像。

- Nithin Viswanathan

---

所以我猜测：您想列出具有jpeg、png和gif扩展名的文件的目录位于某个服务器上，该服务器通过Web服务器公开它们。由于某种原因，您需要在客户端获取文件的引用。您需要文件的路径还是URI？您的Web服务器是否提供了某种目录列表？ - marionebl

Answer 1

尝试这种方法。

HTML代码：

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

JQUERY的代码：

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

基本逻辑引用自这个SO问题这里

愉快的编码 :)

- dreamweiver

---

@NithinViswanathan：是的，你尝试过这个逻辑吗？ - dreamweiver

（'<li>'+filename+<'/li'>); 应该是（'<li>'+filename+'</li>'); - user1432290

是的，那是一个打字错误。 - dreamweiver

它不起作用。 - Zain Shabir

我遇到了语法错误 '[ '。 - Zain Shabir

@ZainShabir：这是未经测试的代码，可能由于拼写错误而导致一些编译时错误。为什么不在Stackblitz上创建一个工作副本并在此处共享呢？ - dreamweiver

Answer 2

我不确定这个方法是否有效，但你可以试一试。

给每张图片命名为1、2、3、4等等。

然后使用for循环来展示图片，例如：

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

var imgsrc="";

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

}

- user2075328

---

图片的名称将不同，不会像1、2、3这样。 - Nithin Viswanathan