MySQL+SSM+Ajax上傳圖片問題

更新時(shí)間：2017年03月16日 10:05:42 作者：梁小濤

本文主要介紹了MySQL+SSM+Ajax上傳圖片問題。具有很好的參考價(jià)值。下面跟著小編一起來看下吧

第一次寫上傳圖片的代碼，碰到很多問題。昨天做了整整一天，終于在晚上的時(shí)候成功了。大聲歡呼。

但是，做完之后，還是有很多問題想不通。所以在這里也算是寫個(gè)筆記，日后忘記了可以回顧，也算請教各路朋友。（^_^）

　Q.1. 網(wǎng)上說Ajax不能上傳文件，但是這個(gè)說法并不是很多，也還是有蠻多通過Ajax上傳文件的分享。

我也沒有通過Ajax做出來，最后是通過AjaxSubmit這個(gè)方法寫的。

　Q.2. AjaxSubmit這個(gè)方法對文件上傳的大小有默認(rèn)限制吧。我選擇大于100KB的文件上傳就不能成功，小于100KB的就可以成功。

上傳大于100KB的時(shí)候，瀏覽器console返回下面的提示。說明他還是執(zhí)行了ajaxSubmit的success方法，并返回textStatus的值為success，但是XMLHttpRequest, 和 errorThrown的responseText返回的HTML代碼內(nèi)容是我在spring-web.xml配置的異常處理視圖網(wǎng)頁。

js代碼（提交表單事件）：

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表單：

<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">關(guān)閉</button>
   <button type="button" class="btn btn-primary" onclick="postImg();" id="imgSubmit">上傳</button>
  </div>
 </div>
</form>

下面是后臺(tái)的java代碼（Controller）

//更新用戶頭像
 @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實(shí)現(xiàn)類

//查找用戶圖片（頭像）
 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; 
 }

實(shí)體類User的photo 是 byte[] 類型的；

數(shù)據(jù)庫的photo是 longblob：

mapper映射器：

<!-- 更新圖片 -->
 <update id="updateUserPhoto" parameterType="cn.tedu.note.entity.User"> 
  UPDATE user set id = #{id}, photo = #{photo,jdbcType=BLOB} <!-- 這里試了，如果不加jdbcType=BLOB 會(huì)出錯(cuò)，雖然不是很理解，但也照做了 --> 
  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配置

 <!-- 文件上傳表單的視圖解析器 --> 
 <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>

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章: