如何使用javascript獲取文件夾中的圖像列表？

Question

我有一個像這樣的文件夾樹：

1. ProjectFolder
   • IMG
     • fjdkslajsd.jpg
     • fjowefwask.jpg
     • fweoifqadf.jpg
     • ...
   • 腳本
     • 的script.js
     • 的jquery.js
   • 樣式表
     • styles.css的
   • 的index.html

index.html文件幾乎只是腳本和樣式表的鏈接，並包含一個div來保存我的內容。 我想要做的是讓script.js找到img文件夾中圖像的所有名稱，並將它們放在一個列表中，這樣我以后可以循環遍歷列表並逐個顯示圖像。 最終結果基本上看起來像一個連續循環img文件夾中的圖像並顯示它們的powerpoint。

我希望能解決你的任何問題，所以這是我的...我如何捕獲包含img文件夾中圖像名稱的字符串列表？ 我已經知道如何遍歷列表並顯示圖像，但我不知道如何處理獲取列表。

Answer 1

除非你有某種接口服務器端，它為你提供了一個表示項目文件夾/文件結構的可解析結構，否則你將無法在javascript中使用或處理這些信息。

如果您的服務器上有PHP，則可以使用普通輸出生成javascript數組：

<script type="text/javascript">
    var imageList=[<?php
        $dir='/projectdir/img/';
        $files = scandir($dir);
        foreach((array)$files as $file){
           if($file=='.'||$file=='..') continue;
           $fileList[]=$file;
        }
        echo "'".implode("','", $fileList)."'";
    ?>];
</script>

瀏覽器解析后， imageList將包含給定文件夾中所有文件的數組。 然后，您可以使用此陣列進行進一步處理/處理。

Answer 2

您必須向服務器端腳本發出ajax請求，該腳本將從任意目錄（這可能是危險的）或特別是images目錄（可能是處理它的更好方法）中提供文件列表。 從服務器端腳本獲得文件列表后，可以使用javascript創建圖像元素，並在准備好修改后將其添加到DOM中。

如果你正在使用PHP，你可以使用PHP將每個圖像添加到適當位置的頁面，並為自己保存一個ajax請求。