2020-10-31 文章首发于知乎文章
电子相册(html+css+js+jq)——批量读取本地图片并动态添加到页面中(下)
作者:落雨湿红尘(也就是我)
导语
本文介绍了作者自己在编写电子相册时,批量读取本地图片的一种方法供大家参考。大致方法流程是
a.运用c语言实现文件读取并形成xml文件
b.再编写js代码对xml文件进行解析并构造元素结点
c.把构造好的元素结点放到html页面中的某个容器标签中
关于作者实现的电子相册效果,可查看以下知乎回答预览
该电子相册用来展示用户导入的照片(这里的照片是指经过相机拍摄而成的照片经过ps处理后,一般为jpg格式),用户可以在指定的文件夹下批量导入、导出图片,或者按需重命名、增删图片。该电子相册系统能读取这些变化,并动态的更改展示页面,完美地做到静态页面所不能达到的效果。
对动态添加图片的介绍分为(上)(下)两部分
上篇,讲的是c语言程序读取相册文件夹下的图片名并保存的xml文件的过程
此为下篇,讲述如何编写js代码解析xml文件并构造元素,并将其动态添加到前端页面中
js读取解析xml文件
在上篇中,我们用c语言写了一个load.exe来读取一个文件夹下(仍以9_HongKong文件夹为例)的所有图片
并将这些图片的名字保存到了9_HongKong.xml文件中
在解析这个xml文件,并构造相应元素之前,有必要先说明一下,对于元素的构造,需要考虑你自己使用的一些工具插件的要求格式
例如,我这里使用了jQuery侧边栏式lightbox图片画廊插件
它是一个通过侧边栏的形式,呈现图片大图的画廊插件,其要求的html结构为
由此可以看到,我们需要一个带有href,data-strip-caption,data-strip-group属性的<a>标签元素,其内嵌套一个带有src属性的<img>元素。通过构造这些元素放到html中,就可以展示9_HongKong相册文件夹中的所有图片了
而在html文件中,为了方便管理所有图片的样式,我用一个<div>元素作为容器,来装这些图片
因此编写js文件需要把构造好的元素,放到这个id="container"的<div>中
<div id="container"></div>
所以,我们的js文件要做的事情就清楚了
-
读取并解析xml文件
-
构造所需元素将其放入到html中
这是我编写的loadImg_Ho.js文件用于读取9_HongKong.xml文件,以展示9_HongKong相册文件夹下的所有图片
//读取HongKong
//读取summary文件中指定的xml文件以获取图片名
//传入的参数xmlDile为xml文件url即文件路径,album是相册文件夹的名字
//例如对于9_HongKong.xml文件,其对应的相册名是9_HongKong
function getPhotos(xmlFile,albumName) {
//生成xml对象。
var xmlDoc = createXMLDoc(xmlFile);
//检验xml对象
if (xmlDoc == null) {
alert('您的浏览器不支持该功能,推荐使用Firefox或Chrome可以解决此问题!');
}
//获取照片节点
var photos= xmlDoc.getElementsByTagName("photo");
// if($.browser.msie){ // 注意各个浏览器之间的区别
// photos = xmlDoc.documentElement.getElementsByTagName("photo"); //读取XML文件中需要显示的数据
// }
// else if (isFirefox=navigator.userAgent.indexOf("Firefox")>0){//Firefox
// photos = xmlDoc.getElementsByTagName('photo'); //读取XML文件中需要显示的数据
// }
// else{
// photos = xmlDoc.getElementsByTagName('photo');
// }
//图片数量
var len = photos.length;
//src图片src,alt 图片alt
var destination = "../../../photos/" + albumName + "/";
var src;
var alt;
//获取照片容器
var container = document.getElementById('container');
for (var i = 0; i < len; i++) {
//构建图片src,alt
photoName = photos[i].childNodes[0].nodeValue;//photos[i].childNodes[0].nodeValue
src = destination + photoName;
alt = photoName;
// alert(photoName);
// 图片元素格式
//<a class="strip thumbnail" href="../../../photos/9_HongKong/2.jpg" data-strip-caption="titleName" data-strip-group="gallery-name">
// <img src="../../../photos/9_HongKong/2.jpg" class="imgs">
// </a>
var ele_img = document.createElement("img");
var ele_a = document.createElement("a");
ele_img.setAttribute("src",src);
ele_img.setAttribute("alt",alt);
ele_img.setAttribute("title",photoName.split(".")[0]);
ele_img.setAttribute("class","imgs");
ele_a.setAttribute("class","strip thumbnail");
ele_a.setAttribute('data-strip-caption',photoName.split(".")[0]);
ele_a.setAttribute('href',src);
ele_a.setAttribute('data-strip-group',"gallery-name");
ele_a.append(ele_img);
container.append(ele_a);
}
return len;//将图片数量返回,方便处理计数,分页等问题
}
//读取xml文件并生成XMLDocument对象
//针对不同浏览器,读取xml文件有不同操作。我使用的是谷歌浏览器
function createXMLDoc(xmlFile) {
var xmlDoc;
if (window.ActiveXObject) {
xmlDoc = new ActiveXObject('Microsoft.XMLDOM');//IE浏览器
xmlDoc.async = false;
xmlDoc.load(xmlFile);
}
// else if (isFirefox=navigator.userAgent.indexOf("Firefox")>0) { //火狐浏览器
// // else if (document.implementation && document.implementation.createDocument) {//这里主要是对谷歌浏览器进行处理
// xmlDoc = document.implementation.createDocument('', '', null);
// xmlDoc.async=false;
// xmlDoc.load(xmlFile);
// }
else{ //谷歌浏览器
var xmlhttp = new window.XMLHttpRequest();
xmlhttp.open("GET",xmlFile,false);
xmlhttp.send(null);
if(xmlhttp.readyState == 4){
xmlDoc = xmlhttp.responseXML.documentElement;
}
}
return xmlDoc;
}
前端html文件,通过<script>标签导入这个js文件,并调用该文件中的getPhotos函数,传入对应参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HongKong</title>
</head>
<body>
<div id="container"></div>
<script src="/loadImg_Ho.js"></script>
<script>
getPhotos("../../../photos/summary/9_HongKong.xml","9_HongKong");
</script>
</body>
</html>
至此,这个html文件,只需要这几行行html语句,即可将9_HongKong文件夹下所有图片读出来并放在html中
不过!这还没完!
经过以上操作读出来的图片,需要自己使用css来把图片排版好,否则肯定会重叠在一起
至于css的样式,大家可以自行发挥,我放几张我这个页面的效果图吧。其中,使用到了其他大神的作品来美化整个页面
-
功能按钮特效:文字悬停特效salal
-
看板喵:各种看板形象预览,看板形象模型源码及使用
由此,经过上下篇的通力合作,一个可以批量读取本地图片的电子相册就制作完成了
下篇部分结束, 点击此处回顾上篇