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

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

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

然后使用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>

来源

2012-10-12 Drucker

你有没有听说过服务器端语言？像[标签：PHP]？ –

根据定义，JavaScript无法访问服务器上的文件系统以访问您的图像或视频。正如Madara所建议的那样，您需要服务器端语言来执行此操作。 –

Javascript无法访问文件系统，因此无法知道要尝试加载哪些图像。您可以使用命名约定做一些技巧，但是您必须硬编码您希望在每个页面上出现的项目数。 – Shmiddty

一个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; 
    } 
}

然后，您可以再简单一些，使用服务器端功能。

来源

2012-10-12 22:22:09 Shmiddty

感谢您的解决方案。但我必须回答一个愚蠢的问题。我不明白pageName变量。为什么文件名需要被称为pageName？我了解序列号1,2，3等...... – Drucker

这不是严格要求，但你会想在页面之间进行某种分离，我假设 – Shmiddty

好的，谢谢。我想我明白。 – Drucker

遗憾的是，有没有办法让它自动地知道什么文件都可以JavaScript不能访问文件系统。

就我个人而言，我喜欢使用PHP 5.4的内置服务器来处理这种事情。 PHP很容易将3210这些文件放到HTML页面中。

或者，你可以有一个批处理脚本“编译”的文件列表的JavaScript来阅读：

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

然后你就可以得到与AJAX或类似的文件，并把它分解的换行符 - 每个文件在一条线上。这样，您所要做的就是运行批处理脚本为您更新文件列表。

来源

2012-10-12 22:08:50

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

回答

相关问题