JavaScript中附件预览功能实现详解(推荐)
由于公司的EMP影像平台比较繁琐,还需要下载才能够能够进行图片的预览,于是业务人员提出在附件列表页面增加预览页面。今天将完成的过程记录下来:
一种是js版本的,另一种是jquery版本, 在这里使用的是js版本的。jquery版本只是引入方式略有不同。
1.引入插件(已上传)
<SCRIPT src="styles/ccc/jquery.min.js"></SCRIPT>
<SCRIPT src="styles/ccc/viewer-jquery.min.js"></SCRIPT>
2.将预览页面写活
<SCRIPT> var attach_path= '${param.attach_path}'; var attach_name= decodeURI('${param.attach_name}'); var attachPath= new Array(); attachName=attach_name.split(","); var attachPath1= new Array(); attachPath1=attach_path.split(","); for (var i=0;i<attachPath1.length;i++) { attachPath2='102storage'+attachPath1[i]; $("#jq22").append("<li><img alt='"+attachName[i]+"' src='"+attachPath2+"'></li>"); } $(function() { $('#jq22').viewer({ url: 'data-original', }); }); </SCRIPT>
将图片的路径从之前的列表页面传到预览页面,进行图片预览时既可以多选又可以不选,如果不选则默认展示本列表所有的图片,勾选的话则展示勾选的之后的图片,在这里发现APP上传了许多的图片的压缩包,所以在后台增加了自动解压的*.zip,*.rar的功能,这部分需要引入第三方jar包,1.6的仅支持*.zip格式的解压,并且最坑的sun公司默认编码,如果有中文就会报错,到jdk1.7才支持中文
import java.io.*;
import java.util.ArrayList;
import java.util.Enumeration;
import java.util.List;
import org.apache.tools.zip.ZipEntry;
import org.apache.tools.zip.ZipFile;
import com.yucheng.cmis.operation.CMISOperation;
import com.github.junrar.Archive;
import com.github.junrar.rarfile.FileHeader;
3.异步删除解压文件
考虑到解压之后的会占用共享磁盘的空间,所以在解压之后做异步删除,时间在20s之后,时间足够,不过20s之后如果点击重新加载页面的话会图片加载失败,因为图片的路径已经失效了。
//异步删除文件(节省空间) List<Thread> threadList = new ArrayList<Thread>(); Thread thread = new Thread(new DeleteTemporaryFolder(dstDirectoryPath)); thread.start(); for(Thread t : threadList){ try { t.join(); } catch (InterruptedException e) { e.printStackTrace(); } }
4.磁盘挂载
在显示图片的时候,页面是访问不了工程以为的图片路径,所以需要执行挂载命令将共享磁盘的路径挂载在工程下的某个路径
mount --bind /testshare01 /app/cmis/project/cmis.war/ff/testshare01
这样就可以正常展示了
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持!
您可能感兴趣的文章:
- Android 图片裁剪功能实现详解(类似QQ自定义头像裁剪) 推荐
- javascript实现网易邮箱多附件上传功能代码
- Extjs上传附件实战开发,实现批量上传及在线预览功能(四)
- javascript实现点击图片文件名预览图片和修改功能
- JavaScript实现本地图片上传预览功能(兼容IE、chrome、FF)
- html+javascript实现带有预览功能的上传表单的问题(望高手们给指教)
- javascript实现添加附件功能的方法
- Java实现图片裁剪预览功能 推荐
- 使用 JavaScript 实现简单候选项推荐功能(模糊搜索)【收藏】【转】
- javascript实现 京东淘宝等商城的商品图片大图预览功能
- 使用 JavaScript 实现简单候选项推荐功能(模糊搜索)【收藏】【转】
- 详解用原生JavaScript实现jQuery的某些简单功能
- Javascript 实现计算器时间功能详解及实例(二)
- JavaScript实现图片上传预览功能
- Extjs上传附件实战开发,实现批量上传及在线预览功能(三)
- 多功能复合机基于用户认证功能的实现过程详解 推荐
- 用javascript实现图片预览功能
- javascript省市级联功能实现方法实例详解
- ASP.NET实现word文档在线预览功能代码-JavaScript编程
- JavaScript实现本地图片上传预览功能(兼容IE、chrome、FF)