码迷,mamicode.com
首页 > 编程语言 > 详细

EasyUI+SpringMVC+Mybaits 页面图片弹窗显示

时间:2015-10-16 15:08:15      阅读:306      评论:0      收藏:0      [点我收藏+]

标签:

 

 

项目中需要完成一个点击超链接弹出窗口,窗口中用于展示存放于数据库中的图片这样的功能;

 

# 准备工具:
环境:
Eclipse 4.3
jdk1.7.0_72
apache-maven-3.0.4
apache-tomcat-7.0.53
spring-mvc-4.0
spring-beans-4.0
mybatis-3.2.8
oracle 11.2.0.3.0
 
 
# 基本思路(按照数据流向分析):
------------------------
后台:
  >>> 首先从数据库中获取一个带BLOB字段的applyprocess实例;
  >>> 通过BLOB字段自身的方法获取一个输出流;
  >>> 通过bufferoutputstream实例的write方法将流输出到缓冲区中;
  >>> 通过flush方法将缓冲区中的流刷到页面上;
 
------------------------
前台:
  >>> 通过jquery的$.post()方法调起后台获取输出流;
  >>> 获取到的输出流为一个对象,需要再次遍历其中的对象,并获取到输出流;
  >>> 获取到输出流按照对象的prosn拼接出图片的显示路径;
  >>> 在一个div节点下面添加图片路径节点;
 
<div id="mpic">
    <img src="http://192.168.24.9:8281/acctSettlement/rfcheck/printImage?prosn=20150901100501" width="100%" height="100%">
    <br>
    <hr>
    <br>
</div>
 
# 代码部分:
 
# Controller.java
 1 @RequestMapping(value = "/printImage", method = RequestMethod.GET)
 2     public void printImage(Long prosn, HttpServletResponse response) {
 3         AReFundApplyProcess annex = aReFundApplyCheckService
 4                 .queryAnnexByProsn(prosn);
 5         InputStream in = null;
 6         try {
 7             in = ((Blob) annex.getContent()).getBinaryStream(); //这里获取content节点是因为mapper中的resultMap中将这个返回类型配置成了BOLB
 8         } catch (SQLException e) {
 9             e.printStackTrace();
10         }
11         try {
12             BufferedOutputStream bos = new BufferedOutputStream(
13                     response.getOutputStream());
14             int n;
15             while ((n = in.read()) != -1) {
16                 bos.write(n);
17             }
18             bos.flush();
19             bos.close();
20         } catch (IOException e) {
21             log.info("显示退款申请资料图片异常");
22         } finally {
23             try {
24                 in.close();
25             } catch (IOException e) {
26                 log.info("输出流关闭失败");
27             }
28         }
29     }

这里可以看到,在第七行的时候已经通过pojo的get方法获取到保存的blob对象,即存放在数据库中图片;

获取到 inputstrem之后即可通过 response的 getOutpstream方法将对象输出到内存中,虽然具体原理有待考证,不过目前功能实现是这样的;

  > 知识点记录:response的getOutputstream方法,以及Java中IO体系相关;

最终将获取到的输出流通过flush方法刷出到页面上;

java代码在这一步就完成了,这个功能最大的问题是在于如何从页面中获取到内存中的图片;

 

# page.jsp 代码

 1 <a id="searchBut" href="#" class="easyui-linkbutton" data-options="iconCls:‘icon-search‘">
 2 查看
 3 </a>
 4 
 5 functions showImg(){ //这个方法在点击查看按钮时调用;
 6 
 7 $.post("<%=basePath%>rfcheck/queryRefundApplyAnnex",
 8     {"applyid":applyidVar}, 
 9     function(data){
10         $("#searchBut").click(function(){
11             $("#mpic").html("");
12             var mdata = data;
13                 $(mdata.rows).each(function(i, elem){
14                 var url = "<%=basePath%>rfcheck/printImage?prosn="+elem.prosn;
15                 var img = "<img src=‘"+url+"‘ width=‘100%‘ height=‘100%‘/>";
16                 $("#mpic").append(img);
17                 $("#mpic").append("<br/><hr/><br/>");
18                 });
19                 $(‘#imageWindow‘).window(‘open‘);
20         });
21     },"json");
22         
23 }

可以看出,这里通过循环遍历的方式依次获取到了内存中的图片对象,并将其拼接成了一个路径用于在弹出窗口中显示;

 

 

EasyUI+SpringMVC+Mybaits 页面图片弹窗显示

标签:

原文地址:http://www.cnblogs.com/caleb-box/p/4884863.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!