h5文件上传完整实例

tip：使用FormData实现文件异步上传。

1.前端代码

1. <form id="userForm">  
2.     <p>姓名：<input type="text" name="userName" /></p>  
3.     <p>头像：<input type="file" name="file" />  
4.     <button type="button" value="保存" onclick="save()"></button>  
5. </form>  

1. <script type="text/javascript">  
2.     /* 保存 */  
3.     function save() {  
4.         //[0]表示获取原生对象  
5.         var formData = new FormData($("#userForm")[0]);  
6.         //还可以手动添加自定义字段，如下：  
7.         formData.append("userPwd", "123456");  
8.           
9.         $.ajax({  
10.             url : 'url...',  
11.             type : 'POST',  
12.             data : formData,  
13.             async : false,  
14.             cache : false,  
15.             contentType : false,// 告诉jQuery不要去设置Content-Type请求头  
16.             processData : false,// 告诉jQuery不要去处理发送的数据  
17.             success : function(data) {  
18.                 alert(data);  
19.                 //...  
20.             },  
21.             error : function(data) {  
22.                 alert(data);  
23.                 //...  
24.             }  
25.         });  
26.     }  
27. </script> 

2.后台代码（restful api）

1. /** 
2.  * 模拟更新用户信息 
3.  *  
4.  * @param request 
5.  * @param file 
6.  *            头像文件 
7.  * @param user 
8.  *            用户对象，自动映射字段 
9.  * @return 反馈信息 
10.  */  
11. @RequestMapping(value = "update", method = RequestMethod.POST)  
12. @ResponseBody  
13. public String update(HttpServletRequest request, 
14. @RequestParam(value = "file", required = false) MultipartFile file,  
15.         UserInfo user) {  
16.     String msg = "success";  
17.   
18.     /** 
19.      * 1.简单上传文件并保存到headimg目录下 
20.      */  
21.     String headImg = null;// 用户保存用户头像文件名  
22.     if (file != null && !file.isEmpty()) {  
23.         headImg = file.getOriginalFilename();  
24.         // 构建上传目录及文件对象，不存在则自动创建  
25.         String path = request.getSession().getServletContext().getRealPath("headimg");  
26.         File imgFile = new File(path, headImg);  
27.         // 保存文件  
28.         try {  
29.             file.transferTo(imgFile);  
30.         } catch (Exception e) {  
31.             e.printStackTrace();  
32.         }  
33.     }  
34.   
35.     /** 
36.      * 2.修改用户信息（这里只是模拟啊...） 
37.      */  
38.     try {  
39.         UserInfo old = new UserInfo();  
40.         // 这个字段是从表单里面传过来的  
41.         old.setUserName(user.getUserName());  
42.         // 这个字段是从js里面传过来的  
43.         old.setUserPwd(user.getUserPwd());  
44.   
45.         if (headImg != null) {  
46.             old.setHeadImg(headImg);  
47.         }  
48.         // 保存或更新....  
49.         service.update(old);  
50.     } catch (Exception e) {  
51.         msg = e.getMessage();  
52.         e.printStackTrace();  
53.     }  
54.   
55.     return msg;  
56. }