如何使用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请求。