首頁 > web前端 > js教程 > 如何使用 jQuery/JavaScript 從檔案名稱不連續的目錄動態載入映像?

如何使用 jQuery/JavaScript 從檔案名稱不連續的目錄動態載入映像?

Susan Sarandon
發布: 2024-11-04 03:21:29
原創
714 人瀏覽過

How to Dynamically Load Images from a Directory with Non-Consecutive Filenames Using jQuery/JavaScript?

使用jQuery/JavaScript 從目錄動態載入圖片

問題:

問題:

我需要將名為「images」的資料夾中的多個圖片載入到我的網頁中。但是,影像檔案名稱不是連續的整數。如何使用 jQuery 或 JavaScript 實現此目的?

答案:
<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>
登入後複製

以下程式碼片段會將「images」資料夾中的所有圖片載入到正文中HTML 頁面:

說明:

程式碼首先建立一個資料夾變量,用於保存「images」資料夾的路徑。然後,它使用 jQuery $.ajax() 函數來載入資料夾的內容。成功回呼函數迭代傳回的資料以檢查檔案副檔名是否與接受的檔案類型(.jpg、.jpeg、.png、.gif)相符。如果是,函數將建立一個具有適當來源屬性的圖像元素,並將其附加到頁面正文。

  • 注意:
  • 此程式碼假設 Apache 伺服器開啟了選項索引功能。
對於 Express for Node 等其他伺服器,「serve-index」NPM 套件可用於允許目錄清單。 可以透過新增更多接受的檔案類型或修改伺服器設定以允許目錄清單來擴充程式碼。

以上是如何使用 jQuery/JavaScript 從檔案名稱不連續的目錄動態載入映像?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板