上传图片功能

转载：http://blog.sina.com.cn/s/blog_4c925dca0101kdar.html

上传图片页面代码：

 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 2 <%@ taglib prefix ="c" uri="http://java.sun.com/jsp/jstl/core" %>
 3 <%
 4 String path = request.getContextPath();
 5 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 6 %>
 7 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 8 <html>
 9     <head>
10         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
11         <title>修改信息</title>
12         <script type="text/javascript" src="<%=basePath %>resources/skin/js/jquery-1.7.1.js"></script>    
13         
14         
15     </head>
16     <body>
17         <div id="d1" >
18         <form action="updateSave1" method="post" enctype="multipart/form-data">
19             头像:<img id="view" width="100" height="100"/>
20             <p>上传头像:<input type="file" name="file" id="portrait" value="上传"  onchange="change();" /></p>
21             
22         
23         <div>
24             <input type="submit" value="确认修改" id="update1"/>
25             
26         </div>
27         </form>
28         </div>
29     </body>
30     <script type="text/javascript">
31 //该JS方法主要处理 图片显示  不涉及上传 仅仅是预览
32     function change() {
33         var pic = document.getElementById("view");
34         var file = document.getElementById("portrait");
35         var ext = file.value.substring(file.value.lastIndexOf(".") + 1)
36                 .toLowerCase();
37         var isIE = navigator.userAgent.match(/MSIE/) != null, isIE6 = navigator.userAgent
38                 .match(/MSIE 6.0/) != null;
39         if (isIE) {
40             file.select();
41             var reallocalpath = document.selection.createRange().text;
42             if (isIE6) {
43                 pic.src = reallocalpath;
44             } else {
45                 pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=""
46                         + reallocalpath + "")";
47                 pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
48             }
49         } else {
50             var file = file.files[0];
51             var reader = new FileReader();
52             reader.readAsDataURL(file);
53             reader.onload = function(e) {
54                 var pic = document.getElementById("view");
55                 pic.src = this.result;
56             };
57         }
58     }
59 </script>
60 </html>

该页面主要主要在form表单上加上 enctype="multipart/form-data" 这个参数

后台页面代码：

 1 @RequestMapping(value = "admin/login/updateSave1", method = RequestMethod.POST)
 2     public String updateSave1(HttpSession session, HttpServletRequest request,MultipartFile file) {
 3         String path = request.getSession().getServletContext().getRealPath("upload");  
 4  //       String fileName = file.getOriginalFilename();
 5         //创建一个图片名字
 6         String fileName = new Date().getTime()+".jpg";   
 7         File targetFile = new File(path, fileName);
 8         //判断这个文件存不存在，如果不存在就创建
 9         if(!targetFile.exists()){  
10             targetFile.mkdirs();  
11         }  
12         User user = new User();
13       //保存  
14         String portrait = request.getContextPath()+"/upload/"+fileName;
15         try {  
16             file.transferTo(targetFile);
17             user.setPortrait(portrait);
18         } catch (Exception e) {  
19             e.printStackTrace();  
20         }  
21        
22         userService.updateSave(user);
23         return "admin/login/select";
24     }