阿坝州网站建设公司

MySQL数据库使用SSM和Ajax如何实现一个图片上传功能

MySQL数据库使用SSM和Ajax如何实现一个图片上传功能？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

我们注重客户提出的每个要求，我们充分考虑每一个细节，我们积极的做好网站制作、网站建设服务，我们努力开拓更好的视野，通过不懈的努力，成都创新互联赢得了业内的良好声誉，这一切，也不断的激励着我们更好的服务客户。 主要业务：网站建设,网站制作,网站设计,重庆小程序开发公司,网站开发,技术开发实力，DIV+CSS，PHP及ASP，ASP.Net，SQL数据库的技术开发工程师。

第一次写上传图片的代码，碰到很多问题。昨天做了整整一天，终于在晚上的时候成功了。大声欢呼。

但是，做完之后，还是有很多问题想不通。所以在这里也算是写个笔记，日后忘记了可以回顾，也算请教各路朋友。（^_^）

Q.1. 网上说Ajax不能上传文件，但是这个说法并不是很多，也还是有蛮多通过Ajax上传文件的分享。

我也没有通过Ajax做出来，最后是通过AjaxSubmit这个方法写的。

Q.2. AjaxSubmit这个方法对文件上传的大小有默认限制吧。我选择大于100KB的文件上传就不能成功，小于100KB的就可以成功。

上传大于100KB的时候，浏览器console返回下面的提示。说明他还是执行了ajaxSubmit的success方法，并返回textStatus的值为success，但是XMLHttpRequest, 和 errorThrown的responseText返回的HTML代码内容是我在spring-web.xml配置的异常处理视图网页。

MySQL数据库使用SSM和Ajax如何实现一个图片上传功能

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

 
　　

 　　

   
   
  

  

  　　 
   
  

  

  　　

下面是后台的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 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：

MySQL数据库使用SSM和Ajax如何实现一个图片上传功能

mapper映射器：


  
  UPDATE user set id = #{id}, photo = #{photo,jdbcType=BLOB}  
  WHERE id = #{id}

Spring-web.xml配置

  
  
  100000 
  UTF-8

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联行业资讯频道，感谢您对创新互联的支持。


本文标题：MySQL数据库使用SSM和Ajax如何实现一个图片上传功能
网站地址：http://azwzsj.com/article/poidce.html

其他资讯