MySQL+SSM+Ajax上传图片问题

 更新时间:2017年03月16日 10:05:42   作者:梁小涛  
本文主要介绍了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> 

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

相关文章

  • Java Mybatis一级缓存和二级缓存

    Java Mybatis一级缓存和二级缓存

    缓存是内存当中一块存储数据的区域,目的是提高查询效率,降低服务器和数据库的压力,这篇文章主要介绍了Mybatis一级缓存和二级缓存,感兴趣的同学可以参考阅读本文
    2023-04-04
  • Springboot @WebFilter无法注入其他Bean的示例问题

    Springboot @WebFilter无法注入其他Bean的示例问题

    这篇文章主要介绍了Springboot @WebFilter无法注入其他Bean的示例问题,本文通过示例代码给大家分享解决方法,需要的朋友可以参考下
    2021-09-09
  • 使用Okhttp实现上传文件+参数请求接口form-data

    使用Okhttp实现上传文件+参数请求接口form-data

    在进行接口对接时,常遇到需要传递多种类型参数及文件上传的情况,解决此问题的关键在于参数传递和文件上传的正确处理,在Service层和Controller层的传参,可以通过@RequestParam标注或直接使用请求实体类,但若结合文件上传,则不应使用@RequestBody注解
    2024-10-10
  • spring boot整合CAS配置详解

    spring boot整合CAS配置详解

    这篇文章主要介绍了spring boot整合CAS配置详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • 探讨java深拷贝

    探讨java深拷贝

    这篇文章主要针对java深拷贝的相关内容进行解析,帮助大家学习理解java深拷贝,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • springboot中的springSession的存储和获取实现

    springboot中的springSession的存储和获取实现

    这篇文章主要介绍了springboot中的springSession的存储和获取实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • SpringBoot使用thymeleaf实现前端表格

    SpringBoot使用thymeleaf实现前端表格

    虽然现在流行前后端分离,但是后端模版在一些关键地方还是非常有用的,例如邮件模版、代码模版等。当然也不排除一些古老的项目后端依然使用动态模版。Thymeleaf 简洁漂亮、容易理解,并且完美支持 HTML5,可以直接打开静态页面,同时不新增标签,只需增强属性
    2022-10-10
  • Java基础之详解HashSet的使用方法

    Java基础之详解HashSet的使用方法

    今天给大家带来的是关于Java基础的相关知识,文章围绕着HashSet的使用方法展开,文中有非常详细的介绍及代码示例,需要的朋友可以参考下
    2021-06-06
  • Spring MVC全局异常处理和单元测试_动力节点Java学院整理

    Spring MVC全局异常处理和单元测试_动力节点Java学院整理

    本篇文章主要介绍了Spring MVC全局异常处理和单元测试,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • Java中ArrayList和LinkedList的区别

    Java中ArrayList和LinkedList的区别

    ArrayList和LinkedList在这个方法上存在一定的性能差异,本文就介绍了Java中ArrayList和LinkedList的区别,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-06-06

最新评论