0

0

MySQL+SSM+Ajax上传图片问题的分析(图)

黄舟

黄舟

发布时间:2018-05-11 15:14:11

|

3102人浏览过

|

来源于php中文网

原创

本文主要介绍了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配置的异常处理视图网页。

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

前端上传0:

永利在线企业网站管理系统(CMS)1.0 Build 20100612
永利在线企业网站管理系统(CMS)1.0 Build 20100612

修正说明:1,实现真正的软件开源。2,安装界面的美化3,真正实现栏目的递归无限极分类。4,后台添加幻灯片图片的管理,包括添加,修改,删除等。5,修正添加新闻的报错信息6,修正网站参数的logo上传问题7,修正产品图片的栏目无限极分类8,修正投票系统的只能单选问题9,添加生成静态页功能10,添加缓存功能特点和优势1. 基于B/S架构,通过本地电脑、局域网、互联网皆可使用,使得企业的管理与业务不受地域

下载
  

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

相关专题

更多
c++主流开发框架汇总
c++主流开发框架汇总

本专题整合了c++开发框架推荐,阅读专题下面的文章了解更多详细内容。

79

2026.01.09

c++框架学习教程汇总
c++框架学习教程汇总

本专题整合了c++框架学习教程汇总,阅读专题下面的文章了解更多详细内容。

46

2026.01.09

学python好用的网站推荐
学python好用的网站推荐

本专题整合了python学习教程汇总,阅读专题下面的文章了解更多详细内容。

121

2026.01.09

学python网站汇总
学python网站汇总

本专题整合了学python网站汇总,阅读专题下面的文章了解更多详细内容。

12

2026.01.09

python学习网站
python学习网站

本专题整合了python学习相关推荐汇总,阅读专题下面的文章了解更多详细内容。

15

2026.01.09

俄罗斯手机浏览器地址汇总
俄罗斯手机浏览器地址汇总

汇总俄罗斯Yandex手机浏览器官方网址入口,涵盖国际版与俄语版,适配移动端访问,一键直达搜索、地图、新闻等核心服务。

71

2026.01.09

漫蛙稳定版地址大全
漫蛙稳定版地址大全

漫蛙稳定版地址大全汇总最新可用入口,包含漫蛙manwa漫画防走失官网链接,确保用户随时畅读海量正版漫画资源,建议收藏备用,避免因域名变动无法访问。

370

2026.01.09

php学习网站大全
php学习网站大全

精选多个优质PHP入门学习网站,涵盖教程、实战与文档,适合零基础到进阶开发者,助你高效掌握PHP编程。

45

2026.01.09

php网站搭建教程大全
php网站搭建教程大全

本合集专为零基础用户打造,涵盖PHP网站搭建全流程,从环境配置到实战开发,免费、易懂、系统化,助你快速入门建站!

12

2026.01.09

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
MySQL 教程
MySQL 教程

共48课时 | 1.7万人学习

MySQL 初学入门(mosh老师)
MySQL 初学入门(mosh老师)

共3课时 | 0.3万人学习

简单聊聊mysql8与网络通信
简单聊聊mysql8与网络通信

共1课时 | 785人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号