电子相册(html+css+js+jq)——批量读取本地图片并动态添加到页面中（下）

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文件要做的事情就清楚了

1. 读取并解析xml文件

2. 构造所需元素将其放入到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的样式，大家可以自行发挥，我放几张我这个页面的效果图吧。其中，使用到了其他大神的作品来美化整个页面

1. 功能按钮特效：文字悬停特效salal

2. 看板喵：各种看板形象预览，看板形象模型源码及使用

3. 照片查看：jQuery侧边栏式lightbox图片画廊插件

4. 时钟挂件：基于canvas的15种不同外观时钟js插件

 

由此，经过上下篇的通力合作，一个可以批量读取本地图片的电子相册就制作完成了

下篇部分结束， 点击此处回顾上篇