由于公司的EMP影像平台比较繁琐，还需要下载才能够能够进行图片的预览，于是业务人员提出在附件列表页面增加预览页面。今天将完成的过程记录下来：

一种是js版本的，另一种是jquery版本, 在这里使用的是js版本的。jquery版本只是引入方式略有不同。

1.引入插件（已上传）

<SCRIPTsrc="styles/ccc/jquery.min.js"></SCRIPT><SCRIPTsrc="styles/ccc/viewer-jquery.min.js"></SCRIPT>

2.将预览页面写活

<SCRIPT>varattach_path='${param.attach_path}';varattach_name=decodeURI('${param.attach_name}');varattachPath=newArray();attachName=attach_name.split(",");varattachPath2=newArray();attachPath2=attach_path.split(",");for(vari=0;i<attachPath2.length;i++){attachPath3='102storage'+attachPath2[i];$("#jq22").append("<li><imgalt='"+attachName[i]+"'src='"+attachPath3+"'></li>");}$(function(){$('#jq22').viewer({url:'data-original',});});</SCRIPT>

将图片的路径从之前的列表页面传到预览页面，进行图片预览时既可以多选又可以不选，如果不选则默认展示本列表所有的图片，勾选的话则展示勾选的之后的图片，在这里发现APP上传了许多的图片的压缩包，所以在后台增加了自动解压的*.zip,*.rar的功能，这部分需要引入第三方jar包，1.6的仅支持*.zip格式的解压，并且最坑的sun公司默认编码，如果有中文就会报错，到jdk1.7才支持中文

importjava.io.*;importjava.util.ArrayList;importjava.util.Enumeration;importjava.util.List;importorg.apache.tools.zip.ZipEntry;importorg.apache.tools.zip.ZipFile;importcom.yucheng.cmis.operation.CMISOperation;importcom.github.junrar.Archive;importcom.github.junrar.rarfile.FileHeader;

3.异步删除解压文件

考虑到解压之后的会占用共享磁盘的空间，所以在解压之后做异步删除，时间在20s之后，时间足够，不过20s之后如果点击重新加载页面的话会图片加载失败，因为图片的路径已经失效了。

//异步删除文件(节省空间)List<Thread>threadList=newArrayList<Thread>();Threadthread=newThread(newDeleteTemporaryFolder(dstDirectoryPath));thread.start();for(Threadt:threadList){try{t.join();}catch(InterruptedExceptione){e.printStackTrace();}}

4.磁盘挂载


在显示图片的时候，页面是访问不了工程以为的图片路径，所以需要执行挂载命令将共享磁盘的路径挂载在工程下的某个路径

mount--bind/testshare01/app/cmis/project/cmis.war/ff/testshare01

这样就可以正常展示了


附件：http://down.51cto.com/data/2366905