Question

在我的大学课程/模块中，它涵盖了中间的HTML和CSS以及基本的Java脚本（我们尚未到达那里）：我需要使用HTML，CSS和可选的Java脚本作为奖励标记来创建一个网站

我被困在画廊中，我想制作一个响应式图像网格（可以从https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp中学习/获取）；但是我想在本地文件夹中填充100张图片，而我的网站上却带有html / css / js代码，不需要我手动对文件夹中的每张图片进行硬编码。事后看来，我想从该文件夹中添加和删除图像，并使网站的画廊适应添加/删除的图像。

理论上，我假设我需要将文件夹的内容读入列表/数组中，然后以某种方式解析它们并输出内容。

我发现了两个涉及这个想法的消息来源： -https://www.html5rocks.com/en/tutorials/file/dndfiles/ -https://github.com/blueimp/JavaScript-Load-Image#meta-data-parsing

我已经搜索了几个小时，所以我认为这样的代码应该存在于某处，以为我认为我对html，css，js等缺乏了解，并且通用术语阻碍了我的搜索工作，因此任何建议将不胜感激。

预先感谢您的时间和精力。

Answer 1

如果您想动态地从文件夹中加载图像（而不是手动输入图像），则不可避免地需要JavaScript。将jQuery添加到组合中将使其变得更加容易而不困难。即使您只是开始学习javascript，也不要害怕使用jQuery。

要使用jQuery，您需要做的就是添加以下内容：

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

基本上，这就是添加$变量，您将在以下代码中看到该变量，它提供了一种直接的方法来进行ajax调用，并将新的img元素添加到body元素中。

要为文件夹中的每个图像创建一个元素（假设它仅包含图像），应如下所示：

<script type="text/javascript">
    var folder = "images"; //TODO: change this to the path to your folder with the images.
    $.ajax({
        url: folder,
        success: function(data) {
            $(data).find("a").attr("href", function(i, val) {
                $("body").append("<img src='" + folder + '/' + val + "'>");
            });
        }
    });
</script>

或者，如果您只是想避免必须手动输入所有img元素并手动填写每个src属性，则可以编写一些使该操作自动化的JavaScript。使用以下脚本，您将能够单击'Choose Files'并选择文件夹中的所有图像，单击'Open'，然后单击'Go'，它将为所有img元素生成html。并显示它。然后，您可以复制该html并将其手动粘贴到您的真实项目中。

<input id="file" type="file" multiple />
<button onClick="go()">Go</button>
<div id="output"></div>

<script type="text/javascript">
  function go() {
  const fileInput = document.getElementById('file');
  const outputDiv = document.getElementById('output');
  let html = '';
  for (const file of fileInput.files) {
    html += '<img src="images/' + file.name + '" />';
  }
  outputDiv.textContent = html;
}
</script>

https://codepen.io/rockysims/pen/MPEMOG

Answer 2

考虑从存在源图像文件的相应目录中使用 shell脚本。

您只需使用以下代码制作一个.cmd文件并执行该代码，它将动态生成一个html文件，您可以在其中显示所需的图像。

scriptToExecute.cmd

echo ^<!doctype html^>^<head^>^</head^>^<body^> >> index.html
for %%j in (*.JFIF, *.png, *.JPG, *.GIF) do echo ^<img src=^"./%%j^" style="width:176px;height:300px" ^>  >> index.html
echo ^</body^>^</html^> >> index.html

index.html

<!doctype html><head></head><body> 
<img src="./2.jfif" style="width:176px;height:300px" >  
<img src="./3.jfif" style="width:176px;height:300px" >  
<img src="./4.jfif" style="width:176px;height:300px" >  
<img src="./1.png" style="width:176px;height:300px" >  
</body></html>

您可以更改shell脚本，以在不同元素（例如轮播等）中显示图像。

在html，css和js网站库中显示本地文件中的图像

2 个答案: