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代码（提交表单事件）：

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">关闭</button>
   <button type="button" class="btn btn-primary" onclick="postimg();" id="imgsubmit">上传</button>
  </div>
 </div>
</form>

下面是后台的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, 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映射器：

<!-- 更新图片 -->
 <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配置

 <!-- 文件上传表单的视图解析器 --> 
 <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> 

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！