第一次寫上傳圖片的代碼，碰到很多問題。昨天做了整整一天，終于在晚上的時候成功了。大聲歡呼。
但是，做完之后，還是有很多問題想不通。所以在這里也算是寫個筆記，日后忘記了可以回顧，也算請教各路朋友。（^_^）
Q.1. 網上說Ajax不能上傳文件，但是這個說法并不是很多，也還是有蠻多通過Ajax上傳文件的分享。
我也沒有通過Ajax做出來，最后是通過AjaxSubmit這個方法寫的。
Q.2. AjaxSubmit這個方法對文件上傳的大小有默認限制吧。我選擇大于100KB的文件上傳就不能成功，小于100KB的就可以成功。
上傳大于100KB的時候，瀏覽器console返回下面的提示。說明他還是執行了ajaxSubmit的success方法，并返回textStatus的值為success，但是XMLHttpRequest, 和 errorThrown的responseText返回的HTML代碼內容是我在spring-web.xml配置的異常處理視圖網頁。
js代碼（提交表單事件）：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
function postImg(){ if ($.trim($("#imgFile").val()) == "") { alert("請選擇圖片！"); return; } console.log($("#imgFile")[0].files[0].size);//小于100*1024，下面的請求就可以成功 var option = { url : '/cloudnote/user/insertUserPhoto.do', type : 'POST',// dataType : 'json', headers : {"ClientCallMode" : "ajax"}, //添加請求頭部 success : function(XMLHttpRequest, textStatus, errorThrown){ console.log(XMLHttpRequest); console.log(textStatus); console.log(errorThrown); console.log("前端輸出上傳成功"); $("#imgClose").click(); }, error: function(XMLHttpRequest, textStatus, errorThrown) { console.log(XMLHttpRequest); console.log(textStatus); console.log(errorThrown); console.log("前端輸出上傳失敗"); } }; $("#imgForm").ajaxSubmit(option); return false; } |
前端HTML表單：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<form id="imgForm" > <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">修改頭像</h4> </div> <div class="modal-body"> <input type="file" id="imgFile" name="imgFile"/> <input id="imgId" name="userId" value="${user.id }" style="display:none" /> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal" id="imgClose">關閉</button> <button type="button" class="btn btn-primary" onclick="postImg();" id="imgSubmit">上傳</button> </div> </div></form> |
下面是后臺的java代碼（Controller）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
//更新用戶頭像 @RequestMapping(value="/insertUserPhoto.do",method = RequestMethod.POST) public void insertUserPhoto( HttpServletRequest req, HttpServletResponse res){ System.out.println("----- 插入圖片 -------"); try{ String id = req.getParameter("userId"); System.out.println(id); MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) req; MultipartFile file = multipartRequest.getFile("imgFile"); byte[] photo = file.getBytes(); boolean result = serv.insertUserPhoto(id, photo); res.setContentType("text/html;charset=utf8"); res.getWriter().write("result:" + result); }catch(Exception e){ e.printStackTrace(); } System.out.println("----- 插入圖片end -------"); } /** * 讀取用戶頭像 * @param req * @param res */ @RequestMapping(value="/readPhoto.do", method=RequestMethod.GET) public void readPhoto(HttpServletRequest req, HttpServletResponse res){ System.out.println("------readPohto-----"); String id = Utils.getSessionUserId(req); try { User user = serv.selectUserPhoto(id); res.setContentType("image/jpeg"); res.setCharacterEncoding("utf-8"); OutputStream outputStream = res.getOutputStream(); InputStream in = new ByteArrayInputStream(user.getPhoto()); int len = 0; byte[] buf = new byte[1024]; while((len = in.read(buf,0,1024)) != -1){ outputStream.write(buf, 0, len); } outputStream.close(); } catch (IOException e) { e.printStackTrace(); } System.out.println("-----readPohto end-----"); return; } |
Service實現類
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
//查找用戶圖片（頭像） public User selectUserPhoto(String id) throws ImageException { User user = userDao.findUserById(id); if(user == null){ throw new UserNameException("用戶名不存在!"); } Map<String, Object> data = userDao.selectUserPhoto(id); System.out.println(data); user.setPhoto((byte[]) data.get("photo")); return user; } //更新用戶圖片（頭像） public boolean insertUserPhoto(String userId, byte[] photo) throws ImageException, UserNameException { if(userId == null || userId.trim().isEmpty()){ throw new UserNameException("用戶id不存在"); } User user = userDao.findUserById(userId); if(user == null){ throw new UserNameException("用戶不存在"); } user.setPhoto(photo); int n = userDao.updateUserPhoto(user); System.out.println("插入圖片：" + n); return n==1?true:false; } |
實體類User的photo 是 byte[] 類型的；
數據庫的photo是 longblob：
mapper映射器：
|
1
2
3
4
5
6
7
8
9
10
|
<!-- 更新圖片 --> <update id="updateUserPhoto" parameterType="cn.tedu.note.entity.User"> UPDATE user set id = #{id}, photo = #{photo,jdbcType=BLOB} <!-- 這里試了，如果不加jdbcType=BLOB 會出錯，雖然不是很理解，但也照做了 --> WHERE id = #{id} </update> <!-- 獲取圖片 --> <select id="selectUserPhoto" parameterType="String" resultType="Map"> SELECT id as id, photo as photo from user WHERE id=#{id} </select> |
Spring-web.xml配置
|
1
2
3
4
5
|
<!-- 文件上傳表單的視圖解析器 --><bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="maxUploadSize"><value>100000</value></property> <property name="defaultEncoding"><value>UTF-8</value></property> </bean> |
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持服務器之家！
原文鏈接：http://www.cnblogs.com/hxliang/p/6557892.html
