springmvc结合base64存取图片到mysql

简介:

1.jsp通过MultipartFile上传图片到后台

2.后台把上传的图片通过base64转换成字符串存到mysql

3.从mysql读取图片字符串,通过base64反转成byte数组,再显示到jsp

1.mysql表结构

2.影射对象

[java]  view plain  copy

 print ?

1. package net.spring.model;  
2.   
3. import javax.persistence.Column;  
4. import javax.persistence.Entity;  
5. import javax.persistence.Id;  
6. import javax.persistence.Table;  
7.   
8. @Entity  
9. @Table(name = "t_img")  
10. public class Img {  
11.     @Id  
12.     private String name;  
13.     @Column  
14.     private String imgData;  
15.   
16.     public String getImgData() {  
17.         return imgData;  
18.     }  
19.   
20.     public void setImgData(String imgData) {  
21.         this.imgData = imgData;  
22.     }  
23.   
24.     public String getName() {  
25.         return name;  
26.     }  
27.   
28.     public void setName(String name) {  
29.         this.name = name;  
30.     }  
31.   
32. }  

3.数据库操作语句

[java]  view plain  copy

 print ?

1. /** 
2.  * 插入图片 
3.  */  
4. @Override  
5. public void savaImg(Img img) {  
6.     try{  
7.         this.getHibernateTemplate().save(img);  
8.     }catch(Exception e){  
9.         e.printStackTrace();  
10.     }  
11. }  
12.   
13. /** 
14.  * 取得图片 
15.  */  
16. @Override  
17. public Img getImg(String name) {  
18.     Query query = this.getSession().createQuery(  
19.             "from Img a where a.name = '" + name + "'");  
20.     return (Img)query.uniqueResult();  
21. }  

4.controller

通过MultipartFile上传文件,具体技术可以看这篇文章点击打开链接

[java]  view plain  copy

 print ?

1. /** 
2.  * 上传文件 
3.  * @param file 
4.  * @param request 
5.  * @param map 
6.  * @return 
7.  */  
8. @ResponseBody  
9. @RequestMapping(value = "uploadForm")  
10. public String uploadMethod(@RequestParam("file") MultipartFile file,  
11.         HttpServletRequest request, Map<String, Object> map) {  
12.   
13.     if (!file.isEmpty()) {  
14.         try {  
15.             BASE64Encoder encoder = new BASE64Encoder();    
16.             // 通过base64来转化图片  
17.             String data = encoder.encode(file.getBytes());  
18.               
19.             Img mImg = new Img();  
20.             mImg.setName("zzzz1");  
21.             mImg.setImgData(data);  
22.             mTestService.savaImg(mImg);  
23.               
24.         } catch (Exception e) {  
25.             e.printStackTrace();  
26.         }  
27.     } else {  
28.         map.put("message", "文件为空");  
29.         return "errorView";  
30.     }  
31.     return null;  
32. }  

[java]  view plain  copy

 print ?

1. /** 
2.  * 取得图片 
3.  * @param request 
4.  * @param response 
5.  */  
6. @RequestMapping("getImg")  
7. public void getImg(HttpServletRequest request,HttpServletResponse response){  
8.     String imgId = request.getParameter("imgId");  
9.     Img img = mTestService.getImg(imgId);  
10.     String data = img.getImgData();  
11.     BASE64Decoder decoder = new BASE64Decoder();    
12.     try {  
13.         byte[] bytes = decoder.decodeBuffer(data);  
14.         for (int i = 0; i < bytes.length; ++i) {    
15.                if (bytes[i] < 0) {// 调整异常数据    
16.                    bytes[i] += 256;    
17.                }    
18.            }  
19.         ServletOutputStream out = response.getOutputStream();  
20.         out.write(bytes);  
21.            out.flush();  
22.            out.close();  
23.     } catch (IOException e) {  
24.         e.printStackTrace();  
25.     }    
26. }  

5.jsp

[javascript]  view plain  copy

 print ?

1. $(document).ready(function() {  
2.      $("#imgId").click(function(){  
3.             var width = $(this).width();  
4.             if(width==200)  
5.             {  
6.              // 图片变大  
7.                 $(this).width(500);  
8.                 $(this).height(500);  
9.                   
10.                 // 设值图片到屏幕中间  
11.              $(this).css("position","absolute");  
12.              $(this).css("top", ( $(window).height() - $(this).height() ) / 2+$(window).scrollTop() + "px");   
13.              $(this).css("left", ( $(window).width() - $(this).width() ) / 2+$(window).scrollLeft() + "px");   
14.             }  
15.             else  
16.             {  
17.              // 还原成原来大小  
18.              $(this).css("position","static");   
19.              $(this).css("top","0px");   
20.              $(this).css("left","0px");   
21.                 $(this).width(200);  
22.                 $(this).height(200);  
23.             }  
24.         });  
25. });  

[javascript]  view plain  copy

 print ?

1. <span style="white-space:pre">    </span>function getImg(){  
2. <span style="white-space:pre">        </span>$("#imgId").attr('src',"getImg.html?imgId=zzzz1");   
3. <span style="white-space:pre">    </span>}  

[html]  view plain  copy

 print ?

1. <input type="button" value="getImg" onclick="getImg()"/>   
2. <img width="200px" height="200px" src="" id="imgId">  

6.效果图

7.base64转换图片后在数据库里的数据