如何使用 jQuery/Javascript 将文件夹中的图像加载到网页中？

使用 jQuery/Javascript 将文件夹中的图像加载到网页中

将名为“images”的文件夹中的图像加载到 HTML 页面中，您可以使用 JavaScript 或 jQuery。即使图像名称不是连续数字，也有解决方案。

解决方案：

<code class="js">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>

说明：

• 第 1 行： 定义相对于 .js 文件的文件夹路径。
• 第 3-8 行： 使用 jQuery 的 $.ajax() 函数加载文件夹内容。成功后，它使用 $(data) 解析 HTML 响应。
• 第 6-7 行： 使用常规的匹配图像文件扩展名的 href 来定位锚标记 ()
• 第 8 行： 追加 ;为每个匹配的图像文件添加标签到页面。

注意事项：

• Apache 服务器： 启用“选项索引”或者使用 Express.js 的“serve-index”之类的包来允许目录列表。
• Node.js 服务器： 使用以下代码启用文件夹列表：

<code class="js">app.use('/images', serveIndex(path.join(__dirname, '/images')));</code>

通过使用这种方法，您可以轻松地将“图像”文件夹中的所有图像加载到您的网页中，无论其名称如何。

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