如何使用 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中文網其他相關文章！