Javascript 使用脚本在html中添加大量图像的最简单方法

我有个问题，我需要一些帮助。我正在制作一个包含大量图像和视频的个人网页。标记是严格的HTML，并且使用CSS设置样式。 我还运行了一到两个Java脚本。前几天我完成了我的第一个页面，我刚刚意识到我必须手动在每个页面上添加大约20-30个图像/视频（我希望创建大约10-15个页面），我想也许有一些脚本可以简化我上传所有媒体内容的任务。请记住，所有的页面看起来都是一样的，所以脚本会让事情变得更简单

以下是我的想法。我想我可以创建两个文件夹，将所有图像和视频添加到每个文件夹中。

然后使用Javascript迭代所有内容，将它们添加到我已经构建的HTML页面中

这可能吗？如果是，请通知我如何获得此解决方案

我对javascript不太了解，无法自己编写代码，因此我希望有完整的解决方案

这是HTML

<ul>
 <li><iframe width="420" height="345"src=""
</iframe></li>
</ul>

<ul>
<li><a href="#"><img src="" width=100 height=100/></a></li>
</ul>

不幸的是，JavaScript无法访问文件系统，因此它无法自动知道哪些文件可用

就我个人而言，我喜欢使用PHP5.4的内置服务器来实现这类功能。PHP很容易将文件
glob（）
放入HTML页面

或者，您可以使用批处理脚本“编译”JavaScript要读取的文件列表：

dir /B *.png;*.gif;*.jpg > filelist.txt

然后，您可以使用AJAX或类似工具获取该文件，并在换行符上拆分它-每个文件都在一行上。这样，您所要做的就是运行批处理脚本来更新文件列表。
javascript唯一的解决方案是使用命名约定，让javascript假设应该有一个具有特定名称的项

一个例子是：

重命名您的文件：

PageName_1.jpg，PageName_2.jpg，PageName_3.jpg，PageName_1.flv，…

缺点是，您必须定义有关要查找的文件类型（扩展名）以及每个页面上要查找的每种类型的数量的参数

var files = {'jpg':3, 'flv':1, ...};
var pageName = "PageName";

设置完成后，可以在对象上迭代：

for (var ext in files){
    for (var i = 0; i < files[ext]; i++){
        var src = "images/" + pageName + "_" + (i+1) + "." + ext;
        ...
    }
}

同样，您可以让您的生活更轻松，并使用服务器端功能
 你听说过服务器端语言吗？比如？根据定义，JavaScript不能访问服务器上的文件系统来访问您的图像或视频。正如Madara所建议的，您需要一种服务器端语言来实现这一点。JavaScript无法访问文件系统，因此它无法知道要尝试加载哪些图像。你可以使用命名约定来做一些技巧，但是你必须硬编码每个页面的预期项目数。一个小ruby脚本就可以了…谢谢你的解决方案。但我必须回答一个愚蠢的问题。我不理解pageName变量。为什么文件名需要称为pageName？我理解序列号，1，2，3，等等…这不是严格要求的，但是你会希望在页面之间有某种分隔，我说assume@Schmiddty，我是否需要一个带有id的div或其他东西来将图像添加到我的html中？这取决于您。一般来说，是的。
function generateElement(src, ext){
    switch(ext){
        case 'jpg':
            ...
        break;
        case 'flv':
            ...
        break;
    }
}