MySQL+SSM+Ajax上傳圖片問題

　　第一次寫上傳圖片的代碼，碰到不少問題。昨天作了整整一天，終於在晚上的時候成功了。大聲歡呼。

可是，作完以後，仍是有不少問題想不通。因此在這裏也算是寫個筆記，往後忘記了能夠回顧，也算請教各路朋友。（^_^）

　　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 function postImg(){
 2     if ($.trim($("#imgFile").val()) == "") {  
 3             alert("請選擇圖片！");  
 4             return;  
 5         }  
 6     console.log($("#imgFile")[0].files[0].size);//小於100*1024，下面的請求就能夠成功
 7     var option = {
 8         url : '/cloudnote/user/insertUserPhoto.do',
 9         type : 'POST',
10 //     dataType : 'json',
11         headers : {"ClientCallMode" : "ajax"}, //添加請求頭部
12         success : function(XMLHttpRequest, textStatus, errorThrown){
13             console.log(XMLHttpRequest);
14             console.log(textStatus);
15             console.log(errorThrown);
16             console.log("前端輸出上傳成功");
17             $("#imgClose").click();
18         },
19         error: function(XMLHttpRequest, textStatus, errorThrown) {
20             console.log(XMLHttpRequest);
21             console.log(textStatus);
22             console.log(errorThrown);
23             console.log("前端輸出上傳失敗"); 
24         }
25     };
26     $("#imgForm").ajaxSubmit(option);
27     return false; 
28 
29     
30 }

 

前端HTML表單：

 1 <form id="imgForm"  > 
 2 　　<div class="modal-content">
 3     　　<div class="modal-header">
 4           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 5           <h4 class="modal-title" id="myModalLabel">修改頭像</h4>
 6        </div>
 7        <div class="modal-body">
 8        　　<input type="file" id="imgFile" name="imgFile"/> 
 9           <input id="imgId" name="userId" value="${user.id }" style="display:none" />
10        </div>
11        <div class="modal-footer">
12        　　<button type="button" class="btn btn-default" data-dismiss="modal" id="imgClose">關閉</button>
13            <button type="button" class="btn btn-primary" onclick="postImg();" id="imgSubmit">上傳</button>
14        </div>
15    </div>
16 </form>  

 

下面是後臺的java代碼（Controller）

 1  　　//更新用戶頭像
 2     @RequestMapping(value="/insertUserPhoto.do",method = RequestMethod.POST)
 3     public void insertUserPhoto(
 4             HttpServletRequest req, HttpServletResponse res){
 5     
 6         System.out.println("----- 插入圖片 -------");
 7         try{
 8             String id = req.getParameter("userId"); 
 9             System.out.println(id);
10             MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) req;
11 
12             MultipartFile file  =  multipartRequest.getFile("imgFile");
13             byte[] photo = file.getBytes();
14             boolean result = serv.insertUserPhoto(id, photo);  
15             res.setContentType("text/html;charset=utf8");  
16             res.getWriter().write("result:" + result);     
17             
18         }catch(Exception e){
19             e.printStackTrace();
20         }
21         System.out.println("----- 插入圖片end -------");
22     }
23     /**
24      * 讀取用戶頭像
25      * @param req
26      * @param res
27      */
28     @RequestMapping(value="/readPhoto.do", method=RequestMethod.GET)
29     public void readPhoto(HttpServletRequest req, HttpServletResponse res){
30         System.out.println("------readPohto-----");
31         String id = Utils.getSessionUserId(req);
32         
33         try {
34             User user = serv.selectUserPhoto(id);
35 
36             res.setContentType("image/jpeg");
37             res.setCharacterEncoding("utf-8");  
38             
39             OutputStream outputStream = res.getOutputStream();  
40             InputStream in = new ByteArrayInputStream(user.getPhoto());  
41            
42             int len = 0;  
43             byte[] buf = new byte[1024];  
44             while((len = in.read(buf,0,1024)) != -1){  
45                 outputStream.write(buf, 0, len);
46             }  
47             outputStream.close();  
48         } catch (IOException e) {  
49             e.printStackTrace();  
50         } 
51         System.out.println("-----readPohto end-----");
52         return;
53     }

 

Service實現類

 1 　　//查找用戶圖片（頭像）
 2     public User selectUserPhoto(String id) throws ImageException {
 3         User user = userDao.findUserById(id);
 4         if(user == null){
 5             throw new UserNameException("用戶名不存在!");
 6         }
 7         
 8         Map<String, Object> data = userDao.selectUserPhoto(id);
 9         System.out.println(data);
10         user.setPhoto((byte[]) data.get("photo"));
11         
12         return user;
13     }
14     //更新用戶圖片（頭像）
15     public boolean insertUserPhoto(String userId, byte[] photo) throws ImageException, UserNameException {
16         if(userId == null || userId.trim().isEmpty()){
17             throw new UserNameException("用戶id不存在");
18         }
19         
20         User user = userDao.findUserById(userId);
21         if(user == null){
22             throw new UserNameException("用戶不存在");
23         }
24         
25         user.setPhoto(photo);
26         int n = userDao.updateUserPhoto(user);
27         System.out.println("插入圖片：" + n);
28         return n==1?true:false;    
29     }

 

實體類User的photo 是 byte[] 類型的；

數據庫的photo是 longblob：

 

mapper映射器：

 1 　　<!-- 更新圖片 -->
 2     <update id="updateUserPhoto" parameterType="cn.tedu.note.entity.User">  
 3         UPDATE user set id = #{id}, photo = #{photo,jdbcType=BLOB} <!-- 這裏試了，若是不加jdbcType=BLOB 會出錯，雖然不是很理解，但也照作了 --> 
 4         WHERE id = #{id}
 5     </update>  
 6     <!-- 獲取圖片 -->
 7     <select id="selectUserPhoto" parameterType="String" resultType="Map">  
 8             SELECT  id as id, photo as photo from user 
 9             WHERE   id=#{id}  
10     </select>  

 

Spring-web.xml配置

1 <!-- 文件上傳表單的視圖解析器 -->  
2  <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">   
3      <property name="maxUploadSize"><value>100000</value></property> 
4      <property name="defaultEncoding"><value>UTF-8</value></property> 
5  </bean>