Question

我有一个问题，我可能需要一些帮助。我正在处理包含大量图像和视频的个人网页。标记严格来说是HTML，它使用CSS设置样式。我还有一两个Javascripts在运行。我前几天完成了我的第一页，并且意识到我必须手动为每个页面添加大约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>

Answer 1

仅限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;
        ...
    }
}

如果您想要的不仅仅是图像，那么您必须创建一些逻辑来确定要生成的元素类型。解决这个问题的最佳方法通常是工厂方法：

function generateElement(src, ext){
    switch(ext){
        case 'jpg':
            ...
        break;
        case 'flv':
            ...
        break;
    }
}

然后，您可以让您的生活更轻松，并使用服务器端功能。

Answer 2

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

就个人而言，我喜欢使用PHP 5.4的内置服务器来做这种事情。 PHP能够glob()文件并将它们放在HTML页面中，这很容易。

或者，你可以有一个批处理脚本＆＃34;编译＆＃34;要读取的JavaScript文件列表：

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

然后您可以使用AJAX或类似文件获取该文件并将其拆分为换行符 - 每个文件将在一行上。这样，您只需运行批处理脚本为您更新文件列表。

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

2 个答案: