如何使用 jQuery/JavaScript 从文件夹动态加载图像？

使用 jQuery/JavaScript 从文件夹动态加载图像

导航文件夹以加载图像等资源时，当它们的名称不是时，它们可能会具有挑战性。顺序的。但是，jQuery 提供了一种从任何目录检索和显示图像的解决方案。

解决方案：

实现此解决方案涉及利用 AJAX 调用来获取目标内容文件夹：

<code class="javascript">var folder = "images/";

$.ajax({
    url : folder,
    success: function (data) {
        $(data).find("a").attr("href", function (i, val) {
            if( val.match(/\.(jpe?g|png|gif)$/) ) { 
                $("body").append( "<img src='"+ folder + val +"'>" );
            } 
        });
    }
});</code>

此方法使用 jQuery 解析来自 AJAX 调用的 HTML 响应。然后，它会迭代响应中的锚标记，仅过滤掉那些以受支持的图像文件扩展名结尾的标记。最后，它动态地将这些经过验证的图像路径附加到 DOM。

注意：

为了使此解决方案有效工作，配置服务器以允许文件夹列表至关重要。在 Apache 服务器中，应启用“索引”选项。对于 Express.js 和 Node.js，可以利用名为“serve-index”的外部包来实现相同的功能。

以上是如何使用 jQuery/JavaScript 从文件夹动态加载图像？的详细内容。更多信息请关注PHP中文网其他相关文章！