将图像从文件夹动态添加到网站

Question

我有一个网站，其中有一个包含 3 个部分的画廊。每个部分最多有 30 张图像。我会将图像存储在与相关部分相关的文件夹中（即“img/gallery/category1”、“img/gallery/category2”和“img/gallery/category3”）

基本上，我不想编写 html 来显示每个单独的图像，而是希望有一个 javascript 循环，它将在文件夹中查找并显示每个图像，并将 url 放在预定义的代码片段中，即：

<div class="span4">
  <img src="img/gallery/category1/IMAGE-FILENAME1">
</div>

<div class="span4">
  <img src="img/gallery/category1/IMAGE-FILENAME2">
</div>

...等等，直到处理完文件夹中的所有图像...（另外，我知道我可以对上面的 html 更聪明一些，但我想传达的是，我希望每个找到的图像 url 都位于重复的代码片段）。

我仍在 javascript 方面进行培训，所以我想知道是否有办法可以做到这一点？

谢谢

Answer 1

Javascript 无法自行完成此操作...但是，如果您有 XML 或 JSON 格式的图像列表及其各自的位置，您可以使用 ajax 来获取该文件，解析其内容并创建标记。

Answer 2

我找到了替代解决方案。

我还没有准备好处理 AJAX、JSON 或下面列出的任何内容。所以我决定考虑使用 PHP。解决方法如下：

我首先使用以下命令将文件夹的内容读取到数组中：

$directory = "DIRECTORY"

$dirhandler = opendir($directory);

$nofiles=0;
while ($file = readdir($dirhandler)) {

if ($file != '.' && $file != '..')
{
  $nofiles++;
  $files[$nofiles]=$file;                
}}

然后使用 foreach 循环遍历数组，每次都回显引用找到的文件名的 html 输出。

工作完美。

Answer 3

您无法从 Javascript 直接查看服务器上的目录。您可以对服务器进行 AJAX 调用以获取列表（以 XML 或 JSON 格式），然后在循环响应时为每个文件创建并附加一个新的 div。

Answer 4

我想更多地了解您的 PHP 解决方案是如何工作的。我正在尝试创建类似的东西，但我遇到了困难。