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

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

# 准备工具：

环境：

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 }

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