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