MySQL+SSM+Ajax上傳圖片問題的分析(圖)

本文主要介紹了mysql+ssm+ajaxmysqlmysql問題。具有很好的參考價值。下面跟著小編一起來看下吧

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

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

 Q.1. 網上說Ajax不能上傳文件,但是這個說法并不是很多,也還是有蠻多通過Ajax上傳文件的分享。

我也沒有通過Ajax做出來,最后是通過AjaxSubmit這個方法寫的。

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

上傳大于100KB的時候,瀏覽器console返回下面的提示。說明他還是執行了ajaxSubmit的success方法,并返回textStatus的值為success,但是mysqlHttpRequest, 和 errorThrown的responmysqlext返回的HTML代碼內容是我在spring-web.xml配置的mysqlmysql網頁。

MySQL+SSM+Ajax上傳圖片問題的分析(圖)

mysql代碼(提交表單mysql):

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;?  }

前端mysql


?   

?  

??? ???

修改頭像

?? ??

??  ? ??? ??

??

??   ??? ??

?

下面是后臺的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實現類

//查找用戶圖片(頭像)  ?public?User?selectUserPhoto(String?id)?throws?ImageException?{  ??User?user?=?userDao.findUserById(id);  ??if(user?==?null){  ???throw?new?UserNameException("用戶名不存在!");  ??}  ??Map<string>?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;?  ?}</string>

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

數據庫的photo是 longblob:

MySQL+SSM+Ajax上傳圖片問題的分析(圖)

mapper映射器:

<!-- 更新圖片 -->  ?<update>?  ??UPDATE?user?set?id?=?#{id},?photo?=?#{photo,jdbcType=BLOB}?<!-- 這里試了,如果不加jdbcType=BLOB 會出錯,雖然不是很理解,但也照做了 -->?  ??WHERE?id?=?#{id}  ?</update>?  ?<!-- 獲取圖片 -->  ?<select>?  ???SELECT?id?as?id,?photo?as?photo?from?user?  ???WHERE?id=#{id}?  ?</select>

Spring-web.xml配置

?<!-- 文件上傳表單的視圖解析器 -->?  ?<bean>?  ??<property><value>100000</value></property>?  ??<property><value>UTF-8</value></property>?  ?</bean>

? 版權聲明
THE END
喜歡就支持一下吧
點贊11 分享