JavaScript中附件预览功能实现详解(推荐)


Posted in Javascript onAugust 15, 2017

由于公司的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

这样就可以正常展示了

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持!

Javascript 相关文章推荐
Maps Javascript
Jan 22 Javascript
javascript 面向对象编程 function也是类
Sep 17 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
Dec 14 Javascript
深入了解Node.js中的一些特性
Sep 25 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
Dec 04 Javascript
jquery validate表单验证的基本用法入门
Jan 18 Javascript
javascript实现右侧弹出“分享到”窗口效果
Feb 01 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
Aug 03 Javascript
VueJs与ReactJS和AngularJS的异同点
Dec 12 Javascript
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
详解js中Array的方法及技巧
Sep 12 Javascript
字节飞书面试promise.all实现示例
Jun 16 Javascript
input输入框内容实时监测(附代码)
Aug 15 #Javascript
vue的基本用法与常见指令
Aug 15 #Javascript
vue如何集成raphael.js中国地图的方法示例
Aug 15 #Javascript
JavaScript与Java正则表达式写法的区别介绍
Aug 15 #Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
Aug 15 #Javascript
form表单序列化详解(推荐)
Aug 15 #Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
Aug 15 #Javascript
You might like
PHP设计聊天室步步通
2006/10/09 PHP
PHP中对数据库操作的封装
2006/10/09 PHP
PHP jQuery表单,带验证具体实现方法
2014/02/15 PHP
详谈PHP文件目录基础操作
2014/11/11 PHP
Linux下从零开始安装配置Nginx服务器+PHP开发环境
2015/12/21 PHP
php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
2016/03/23 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
PHP PDOStatement::bindColumn讲解
2019/01/30 PHP
由prototype_1.3.1进入javascript殿堂-类的初探
2006/11/06 Javascript
Javascript中的isNaN函数使用说明
2011/11/10 Javascript
Jquery Uploadify上传带进度条的简单实例
2014/02/12 Javascript
使用js画图之正弦曲线
2015/01/12 Javascript
分享我的jquery实现下拉菜单心的
2015/11/29 Javascript
js控住DOM实现发布微博效果
2016/08/30 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
Vue中的vue-resource示例详解
2018/11/02 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
2020/06/05 Javascript
Python制作CSDN免积分下载器
2015/03/10 Python
python3实现域名查询和whois查询功能
2018/06/21 Python
Python之用户输入的实例
2018/06/22 Python
Python定时任务sched模块用法示例
2018/07/16 Python
详解Python logging调用Logger.info方法的处理过程
2019/02/12 Python
基于python实现操作redis及消息队列
2020/08/27 Python
探讨HTML5移动开发的几大特性(必看)
2015/12/30 HTML / CSS
美国男士内衣品牌:Tommy John
2017/12/22 全球购物
中国一家专注拼团的社交购物网站:拼多多
2018/06/13 全球购物
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
中国一家综合的外贸B2C电子商务网站:DealeXtreme(DX)
2020/03/10 全球购物
会计应届生的自荐信
2013/12/13 职场文书
函授毕业自我鉴定
2013/12/19 职场文书
结婚典礼证婚词
2014/01/08 职场文书
大学同学十年聚会感言
2014/02/21 职场文书
个人对照检查剖析材料
2014/10/13 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
西双版纳导游词
2015/02/03 职场文书