如何使用目录文件生成 HTML href 代码答案

【问题标题】：How to generate HTML href code with directory files如何使用目录文件生成 HTML href 代码
【发布时间】：2018-12-17 15:47:54
【问题描述】：

我需要生成一个循环中的静态 HTML href 代码，除了图像的来源。图像存储在一个文件夹中。 javascript有没有办法生成整个目录并将文件名放入src="/pictures/%filename%.jpg"？有很多图片，我不想手动链接每张照片。这会花费很多时间。谢谢！

【问题讨论】：

你有存储在数组中的链接吗？
Javascript 是客户端（通常）。由于安全原因，您不能直接使用 javascript 执行此操作。您需要服务器端逻辑以列表形式检索文件位置。然后，您可以将此列表发送给客户，以随心所欲地处理它。
您是否在使用任何服务器端标记生成工具，例如 ASP.NET MVC？
从技术上讲，如果启用目录列表是可能的，但这是一个非常糟糕的主意，正如上面的 cmets 所说，使用服务器端脚本（节点、PHP、ASP 等）来生成 html
好吧对不起我的错误解释。我不希望客户端完成这个循环。我想生成一个本地应用程序来生成带有目录图片的 src="/pathtopicutres" 并将其粘贴到 pictures.html 文件

标签： javascript html loops href

【解决方案1】：

JavaScript 无法访问服务器文件。您可以使用 PHP scandir() 获取指定目录中所有文件的数组。然后做

foreach ($arr as $file){
    echo "<img src='/path/to/file/" . $file . "'>";
}

【讨论】：

这是一个有用的答案。我可以把我的整个 HTML 代码放在那里，然后把 . $文件。进入img src=""？此代码是否会为目录中的所有文件生成 html 源代码？

【解决方案2】：

所以我已经在服务器上上传了这个 php 文件：

<?php
$dir    = 'best-off';
$files1 = scandir($dir);

foreach ($files1 as $file){
    echo "
    <div>
      <span class='img-thumbnail d-block cur-pointer'>
        <img alt='' src='img/best-off/thumbs/" . $file . "' class='img-fluid'>
      </span>
    </div>";
}
?>

然后我在浏览器中查看源代码并将代码复制到最初的 HTML 文件中。像魅力一样工作。谢谢！

【讨论】：