使用 AJAX / Jquery 获取文件夹中所有 url 图像的列表答案

【问题标题】：Get list of all url images in a folder with AJAX / Jquery使用 AJAX / Jquery 获取文件夹中所有 url 图像的列表
【发布时间】：2017-02-14 10:30:28
【问题描述】：

我有一个包含图片的文件夹。我想检索这些图像的所有“url”以使用相应的“src”创建“img 标签”，并将它们放在“div”中。如何使用 AJAX/Jquery 做到这一点？

// What I have :

myFolder |
         | - image_01.jpg
         | - image_02.jpg
         | - image_03.jpg
         | - ...


 // What I want :

<div id="myDiv">
   <img src="http://www.example.com/myFolder/image_01.jpg" />
   <img src="http://www.example.com/myFolder/image_02.jpg" />
   <img src="http://www.example.com/myFolder/image_03.jpg" />
   ...
</div>

【问题讨论】：

您是否有 url 的主列表，还是要查询文件夹，然后获取 url？
查找 PHP scandir 以检索特定文件夹内容。
我认为您不会找到一种方法来使用 jQuery 来简单地查询服务器上的文件系统。您要么必须在 UI 代码中手动维护一组图像名称并使用它们来构建标记，要么需要某种服务器端代码来生成标记或服务来返回图像列表。有人可以证明我在这方面错了，但我不这么认为。
只能使用服务器端代码读取目录内容...并发出ajax请求以获取数据
如果图像列表是可刮的，你可以用我的回答来做，否则你不能用 AJAX / jQuery 访问服务器文件系统

标签： jquery ajax image url src

【解决方案1】：

试试这个：

$(function(){
    function lpadZeros(str, max) {
        str = str.toString();
        return str.length < max ? lpadZeros("0" + str, max) : str;
    }
    for(var i=1;i<100;i++){
        var imgObj = $('<img/>');
        imgObj.load(function() {
            var thisimg = this;
            $('#myDiv').append(thisimg);
        });
        imgObj.attr('src', 'http://www.example.com/myFolder/image_' + lpadZeros(i, 2) + '.jpg');
    }
});

【讨论】：

非常好的答案，但是唉，我不知道图像文件的名称！我只是为示例编写了“image_01.jpg”，但它可能是“holidays_145_75.jpg”或“DSC_0152458.jpg”或其他任何内容。还是谢谢。
如果你知道服务器端的图像列表，你需要把它们放在一个数组中然后循环遍历它。