search
HomeDatabaseMysql TutorialAnalysis of the problem of uploading images with MySQL+SSM+Ajax (picture)

This article mainly introduces the problem of MySQL+SSM+Ajaxuploading images. Has very good reference value. Let’s take a look with the editor below

It was my first time to write the code for uploading images, and I encountered many problems. I worked on it all day yesterday and finally succeeded in the evening. Cheers loudly.

However, after finishing it, there are still many questions that I can’t figure out. So here it can be considered as writing a note. If you forget it in the future, you can review it. It can also be regarded as asking friends from all walks of life. (^_^)

Q.1. It is said on the Internet that Ajax cannot upload files, but there are not many people saying this, and there are still many people sharing files uploaded through Ajax.

I didn't make it through Ajax. In the end, I wrote it through the AjaxSubmit method.

Q.2. Does the AjaxSubmit method have a default limit on the size of file upload? If I choose a file larger than 100KB, it will not be uploaded successfully, but if it is smaller than 100KB, it will be successful.

When uploading more than 100KB, the browser console returns the following prompt. It means that he still executed the success method of ajaxSubmit and returned the value of textStatus as success, but the HTML code content returned by XMLHttpRequest, and errorThrown's responseseText is what I did in spring- Exception handling View web page configured in web.xml.

Analysis of the problem of uploading images with MySQL+SSM+Ajax (picture)

##js Code (submit form event ):

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

Front-endHTML form

<form id="imgForm" > 
  <p class="modal-content">
   <p class="modal-header">
   <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
   <h4 id="修改头像">修改头像</h4>
  </p>
  <p class="modal-body">
    <input type="file" id="imgFile" name="imgFile"/> 
   <input id="imgId" name="userId" value="${user.id }" style="display:none" />
  </p>
  <p 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>
  </p>
 </p>
</form>

The following is the background java code (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 implementation class

//查找用户图片(头像)
 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; 
 }

The photo of the entity class User is of byte[] type;

The photo of the database is longblob:

Analysis of the problem of uploading images with MySQL+SSM+Ajax (picture)

mapper 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 configuration

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

The above is the detailed content of Analysis of the problem of uploading images with MySQL+SSM+Ajax (picture). For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
图文详解mysql架构原理图文详解mysql架构原理May 17, 2022 pm 05:54 PM

本篇文章给大家带来了关于mysql的相关知识,其中主要介绍了关于架构原理的相关内容,MySQL Server架构自顶向下大致可以分网络连接层、服务层、存储引擎层和系统文件层,下面一起来看一下,希望对大家有帮助。

mysql怎么替换换行符mysql怎么替换换行符Apr 18, 2022 pm 03:14 PM

在mysql中,可以利用char()和REPLACE()函数来替换换行符;REPLACE()函数可以用新字符串替换列中的换行符,而换行符可使用“char(13)”来表示,语法为“replace(字段名,char(13),'新字符串') ”。

mysql怎么去掉第一个字符mysql怎么去掉第一个字符May 19, 2022 am 10:21 AM

方法:1、利用right函数,语法为“update 表名 set 指定字段 = right(指定字段, length(指定字段)-1)...”;2、利用substring函数,语法为“select substring(指定字段,2)..”。

mysql的msi与zip版本有什么区别mysql的msi与zip版本有什么区别May 16, 2022 pm 04:33 PM

mysql的msi与zip版本的区别:1、zip包含的安装程序是一种主动安装,而msi包含的是被installer所用的安装文件以提交请求的方式安装;2、zip是一种数据压缩和文档存储的文件格式,msi是微软格式的安装包。

mysql怎么将varchar转换为int类型mysql怎么将varchar转换为int类型May 12, 2022 pm 04:51 PM

转换方法:1、利用cast函数,语法“select * from 表名 order by cast(字段名 as SIGNED)”;2、利用“select * from 表名 order by CONVERT(字段名,SIGNED)”语句。

MySQL复制技术之异步复制和半同步复制MySQL复制技术之异步复制和半同步复制Apr 25, 2022 pm 07:21 PM

本篇文章给大家带来了关于mysql的相关知识,其中主要介绍了关于MySQL复制技术的相关问题,包括了异步复制、半同步复制等等内容,下面一起来看一下,希望对大家有帮助。

带你把MySQL索引吃透了带你把MySQL索引吃透了Apr 22, 2022 am 11:48 AM

本篇文章给大家带来了关于mysql的相关知识,其中主要介绍了mysql高级篇的一些问题,包括了索引是什么、索引底层实现等等问题,下面一起来看一下,希望对大家有帮助。

mysql怎么判断是否是数字类型mysql怎么判断是否是数字类型May 16, 2022 am 10:09 AM

在mysql中,可以利用REGEXP运算符判断数据是否是数字类型,语法为“String REGEXP '[^0-9.]'”;该运算符是正则表达式的缩写,若数据字符中含有数字时,返回的结果是true,反之返回的结果是false。

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),