java+swiper实现图片预览(不做io操作)
需求:实现图片的预览。图片存于服务器的本地磁盘上不是在数据库中。预览的时候不做io操作 以降低页面的负载。
插件 :swiper 自行百度下载注意下载web版的。
以下是contoller的代码:
1.以下代码有个偷懒(low)的地方,也是数据表的设计缺陷没有存文件的类型 所以直接用文件名的后缀判断是否是图片。
2.controller的作用就是把图片在服务器上的绝对路径返回给jsp ,如C://pic/helloworld.jpg;
package com.main.controller; import java.io.File; import java.util.ArrayList; import java.util.List; import javax.annotation.Resource; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.RequestMapping; import com.common.CommonUtil; import com.common.DocConverter; import com.main.pojo.Attachment; import com.main.service.AttachmentService; /** * 附件预览controller 基于OppenOfiice实现 * * @author lwh 2018年9月21日 下午3:28:38 */ @Controller @RequestMapping("/attachmentPreview") public class AttachmentPreviewController { @Resource private AttachmentService attachmentService; /** * 附件预览(支持excel word pdf txt ppt pdf png gif bpm jpg) lwh 2018年10月11日 * 下午4:25:55 * * @param id * 附件 * @param request * @param response * @return */ @RequestMapping("/filePreview/{id}") public String toFilePreviewPage(@PathVariable String id, HttpServletRequest request, HttpServletResponse response) { boolean res = false; String contexPath = request.getSession().getServletContext().getRealPath("/"); boolean isPic = false;// 判断是否为图片预览 · try { Attachment att = attachmentService.getById(id); if (isPicture(att.getFileName())) {
//图片预览 List<Attachment> attList = new ArrayList<>(); attList.add(att); // TODO /* * * 为了避免预览时大量下载造成压力故图片预览的时候 不做图片下载IO操作, 通过配置虚拟目录读取,将以下配置加入 * tomcat的server.xml的<host>中 <Context path="/attachment" * docBase="E:\apache-tomcat-7.0.90\financeAttatch\" * docBase为tomcat下的附件存放目录的绝对路径 reloadable="true"></Context> * 如果配置nginx或者其他负载均衡等。。。 需要将虚拟目录加入其配置文件,否则可能会被拦截,导致图片无法显示 */ isPic = true; List<Attachment> attListTemp = attachmentService.getPictureAttachment(att.getAsocciateId(), att.getId()); /* * 设置当前点击图片为第一张显示 */ if (attListTemp != null && attListTemp.size() > 0) { for (Attachment attachment : attListTemp) { attList.add(attachment); } } request.setAttribute("list", attList); } else { // TODO // 服务器上需要安装openoffice 并启动服务. DocConverter d = new DocConverter(att.getFileUrl() + File.separator + att.getFileName(), contexPath + "/resources/file/ftp", contexPath + "/WEB-INF/classes"); delete(contexPath + "/resources/file/ftp"); // 调用conver方法开始转换,先执行doc2pdf()将office文件转换为pdf;再执行//pdf2swf()将pdf转换为swf; res = d.conver(); String fn = d.getswfPath(); if (CommonUtil.isNotNullStr(fn)) { request.setAttribute("swfPath", fn.substring(fn.lastIndexOf("/"), fn.length())); } } } catch (Exception e) { request.setAttribute("errorMsg", e.getMessage()); e.printStackTrace(); } if (res == false && isPic == false) { // 类型不支持预览。 return "attach/Cantpreview"; } if (isPic) { return "attach/PicPreview";// 图片预览 } return "attach/FilePreview";// 文档预览 } /** * 清除临时文件夹中的文件。 */ protected boolean delete(String path) { boolean flag = false; File file = new File(path); if (!file.exists()) { return flag; } if (!file.isDirectory()) { return flag; } String[] tempList = file.list(); File temp = null; for (int i = 0; i < tempList.length; i++) { if (path.endsWith(File.separator)) { temp = new File(path + tempList[i]); } else { temp = new File(path + File.separator + tempList[i]); } if (temp.isFile()) { temp.delete(); } if (temp.isDirectory()) { delete(path + "/" + tempList[i]);// 先删除文件夹里面的文件 delete(path + "/" + tempList[i]);// 再删除空文件夹 flag = true; } } return flag; } /** * 要预览其他格式的图片,将图片的后缀加入条件即可,支持预览html img标签src="支持的图片格式" lwh 2018年10月15日 * 上午11:38:25 * * @param fileName * @return */ public boolean isPicture(String fileName) { boolean flag = false; if (fileName.endsWith(".jpg") || fileName.endsWith(".bpm") || fileName.endsWith(".png") || fileName.endsWith(".gif")) { flag = true; } return flag; } }
以下是jsp代码 用到了swiper.js 没有其他技术点,贴了就可以用了 。具体页面样式的话 可以copy一个swiper官方demo改一下就好了。
不足之处是不能放大缩小旋转等操作。笔者有写了一个带这些功能的插件,但是没有经过考验的代码 日后再贴吧。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 3 <% 4 String path = request.getContextPath(); 5 String basePath = request.getScheme() + "://" 6 + request.getServerName() + ":" + request.getServerPort() 7 + path + "/"; 8 String swfName = String.valueOf(request.getAttribute("swfPath")); 9 %> 10 11 12 13 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 14 <html> 15 <head> 16 17 <title>凭证录入</title> 18 <meta http-equiv="pragma" content="no-cache"> 19 <meta http-equiv="cache-control" content="no-cache"> 20 <meta http-equiv="expires" content="0"> 21 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 22 <meta http-equiv="description" content="This is my page"> 23 <base href="<%=basePath%>"> 24 <link rel="stylesheet" 25 href="<%=path%>/resources/style/record-background.css" type="text/css" /> 26 27 <link rel="stylesheet" 28 href="<%=path%>/resources/style/idangerous.swiper.css" type="text/css" /> 29 <link rel="stylesheet" 30 href="<%=path%>/resources/style/idangerous.swiper.scrollbar.css" 31 type="text/css" /> 32 <!-- 通用的文件导入 --> 33 <jsp:include page="/base.jsp"></jsp:include> 34 <script type="text/javascript" 35 src="<%=path%>/resources/ueditor/third-party/jquery-1.10.2.min.js"></script> 36 <script type="text/javascript" 37 src="<%=path%>/resources/script/idangerous.swiper.js"></script> 38 <style> 39 body { 40 margin: 0; 41 font-family: Arial, Helvetica, sans-serif; 42 font-size: 13px; 43 line-height: 1.5; 44 } 45 46 .device { 47 width: 840px; 48 height: 400px; 49 padding: 30px 40px; 50 border-radius: 20px; 51 background: #111; 52 border: 3px solid white; 53 margin: 5px auto; 54 position: relative; 55 box-shadow: 0px 0px 5px #000; 56 } 57 58 .device .arrow-left { 59 background: url(<%=path%>\/resources\/image\/img\/arrows.png) no-repeat 60 left top; 61 position: absolute; 62 left: 10px; 63 top: 50%; 64 margin-top: -15px; 65 width: 17px; 66 height: 30px; 67 } 68 .device .arrow-right { 69 background: url(<%=path%>\/resources\/image\/img\/arrows.png) no-repeat 70 left bottom; 71 position: absolute; 72 right: 10px; 73 top: 50%; 74 margin-top: -15px; 75 width: 17px; 76 height: 30px; 77 } 78 79 .swiper-container { 80 height: 400px; 81 width: 840px; 82 } 83 84 .content-slide { 85 padding: 20px; 86 color: #fff; 87 } 88 89 .title { 90 font-size: 25px; 91 margin-bottom: 10px; 92 } 93 94 .pagination { 95 position: absolute; 96 left: 0; 97 text-align: center; 98 bottom: 5px; 99 width: 100%;} 100 img{ width: 100%; height: auto;max-width: 100%; display: block; } 101 102 .swiper-pagination-switch { 103 display: inline-block; 104 width: 10px; 105 height: 10px; 106 border-radius: 10px; 107 background: #999; 108 box-shadow: 0px 1px 2px #555 inset; 109 margin: 0 3px; 110 cursor: pointer; 111 } 112 .swiper-active-switch { 113 background: #fff; 114 } 115 </style> 116 </head> 117 <body> 118 119 <div class="device"> 120 <a class="arrow-left" href="#"></a> 121 <a class="arrow-right" href="#"></a> 122 <div class="swiper-container"> 123 <div id="picContianer" class="swiper-wrapper"> 124 <c:forEach items="${list}" var="item" varStatus="status"> 125 <div class="swiper-slide"> 126 <img src="/attachment/${item.fileName}"> 127 </div> 128 </c:forEach> 129 </div> 130 </div> 131 <div class="pagination"></div> 132 </div> 133 <script> 134 var mySwiper = $('.swiper-container').swiper({ 135 pagination : '.pagination', 136 loop : true, 137 grabCursor : true, 138 paginationClickable : true 139 }); 140 $('.arrow-left').on('click', function(e) { 141 e.preventDefault() 142 var swiper = $(this).siblings('.swiper-container').data('swiper'); 143 swiper.swipePrev(); 144 }); 145 $('.arrow-right').on('click', function(e) { 146 e.preventDefault() 147 var swiper = $(this).siblings('.swiper-container').data('swiper'); 148 swiper.swipeNext(); 149 }); 150 </script> 151 </body> 152 </html>
javaweb项目好像没法直接访问本地磁盘(知道方法的大佬告知一声)所以使用的虚拟目录。 以下配置了解一下
将以下配置加入
* tomcat的server.xml的<host>中 <Context path="/attachment"
* docBase="E:\apache-tomcat-7.0.90\financeAttatch\"
* docBase为tomcat下的附件存放目录的绝对路径 reloadable="true"></Context>
* 如果配置nginx或者其他负载均衡等。。。 需要将虚拟目录加入其配置文件,否则可能会被拦截,导致图片无法显示
两个配置文件我就不贴了 没啥难度 。
大概实现思路就是这样,不足之处请大家指出。
posted on 2018-10-26 16:12 techno-geek 阅读(702) 评论(0) 编辑 收藏 举报