MySQL 是一个开放源码的小型关联式数据库管理系统, 开发者为瑞典 MySQL AB 公司 MySQL 被广泛地应用在 Internet 上的中小型网站中由于其体积小速度快总体拥有成本低, 尤其是开放源码这一特点, 许多中小型网站为了降低网站总体拥有成本而选择了 MySQL 作为网站数据库
本文主要介绍了 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>
来源: http://www.phperz.com/article/18/0220/357965.html