ssm上传图片

1      需求

添加客户时上传图片和客户修改信息是上传图片。

2      思路

首先，数据库创建pic字段，类型为varchar，通过逆向工程重新生成mapper接口和xml文件。

其次，service层注入mapper接口，调用mapper接口中的添加和更新方法。

然后，controller层注入service接口，用MultipartFile接受jsp传入的图片，经过处理写入客户po类中，调用service的方法更新和添加方法。

最后，编写jsp界面，通过js将要上传的图片显示添加页面或更改页面。Form表单配置提交多部件的属性enctype="multipart/form-data"。

3      环境准备

3.1    导入所需Jar包

3.2    配置springmvc.xml文件

在页面form中提交enctype="multipart/form-data"的数据时，需要springmvc对multipart类型的数据进行解析，在springmvc.xml中配置multipart类型解析器

<!-- 文件上传 -->

   <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">

      <!-- 设置上传文件的最大尺寸为5MB -->

      <property name="maxUploadSize">

         <value>5242880</value>

      </property>

   </bean>

4      dao层

逆向工程参考http://how2j.cn/k/mybatis/mybatis-generator/1376.html

dao层运用逆向工程生成mapper接口中的方法和自定义的接口的方法

参考这篇文章的 https://www.cnblogs.com/peter-hao/p/ssm_custom.html

的dao层

5      service层

参考这篇文章的https://www.cnblogs.com/peter-hao/p/ssm_custom.html  中的service层

6      controller层

参考https://www.cnblogs.com/peter-hao/p/ssm_custom.html  中的controller层，

6.1    修改addCustomSubmit方法

　　@RequestMapping("/addCustomSubmit")

   public String addCustomSubmit(HhCustom hhCustom, MultipartFile custom_pic) throws Exception {

      // 上传图片

      // 原始名称

      String originalFilename = custom_pic.getOriginalFilename();

      if (custom_pic != null && originalFilename != null && originalFilename.length() > 0) {

         // 存储图片的物理路径

         String pic_path = "C:\\Users\\Peter.Hao\\Desktop\\ssm_doc\\image\\";

         // 新的图片名称

         String newFileName = UUID.randomUUID() + originalFilename.substring(originalFilename.lastIndexOf("."));

         // 新的图片(物理路径+图片名)

         File newFile = new File(pic_path + newFileName);

         // 将内存中的数据写到磁盘

         custom_pic.transferTo(newFile);

         // 将图片加入到HhCustom中

         hhCustom.setPic(newFileName);

      }

      // 调用service更新客户信息

      customService.addCustom(hhCustom);

      // 重定向

      return "redirect:findAllCustom.action";

   }

6.2    修改updateCustomSubmit方法

　　// 更新客户信息submit

   @RequestMapping("/updateCustomSubmit")

   public String updateCustomSubmit(Integer id, HhCustom hhCustom, MultipartFile custom_pic) throws Exception {

      // 上传图片

      // 原始名称

      String originalFilename = custom_pic.getOriginalFilename();

      if (custom_pic != null && originalFilename != null && originalFilename.length() > 0) {

         // 存储图片的物理路径

         String pic_path = "C:\\Users\\Peter.Hao\\Desktop\\ssm_doc\\image\\";

         // 新的图片名称

         String newFileName = UUID.randomUUID() + originalFilename.substring(originalFilename.lastIndexOf("."));

         // 新的图片(物理路径+图片名)

         File newFile = new File(pic_path + newFileName);

         // 将内存中的数据写到磁盘

         custom_pic.transferTo(newFile);

         // 将图片加入到HhCustom中

         hhCustom.setPic(newFileName);

      }

      // 调用service更新客户信息

      customService.updateCustom(id, hhCustom);

      return "redirect:findAllCustom.action";

   }

7      jsp页面

7.1    customlist.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

   pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript">

function addCustom(){

document.customForm.action="${pageContext.request.contextPath}/addCustom.action";

   document.customForm.submit();

}

</script>

<title>客戶列表</title>

</head>

<body>

   <form name="customForm"    action="${pageContext.request.contextPath}/findAllCustom.action"      method="post">

      查询条件：

      <table width="100%" border=1>

         <tr>

            <td>客戶名称：<input name="hhCustom.name" />

            </td>

            <td>客戶类型： <select name="hhCustom.category">

                   <option selected="selected"></option>

                   <c:forEach items="${customTypes}" var="customType">

                      <option value="${customType.value }">${customType.value}</option>

                   </c:forEach>

            </select>

            </td>

            <td><button type="submit" value="查询" >查询</button></td>

            <td><input type="button" value="添加客户" onclick="addCustom()"/></td>

         </tr>

      </table>

      客戶列表：

      <table width="100%" border=1>

         <tr>

            <!-- <th>选择</th>  -->

            <th>客戶名称</th>

            <th>客戶邮箱</th>

            <th>客戶电话</th>

            <th>客户类型</th>

            <th>客户头像</th>

            <th>操作</th>

         </tr>

         <c:forEach items="${customlist}" var="custom">

            <tr>

                <%-- <td><input type="checkbox" name="custom_id" value="${custom.id}" /></td> --%>

                <td>${custom.name }</td>

                <td>${custom.mail }</td>

                <td>${custom.phoneNumber }</td>

                <td>${custom.category }</td>

                <td align="center"><img src="/pic/${custom.pic }" width="100px" height="100px"/></td>

               <%--<td><fmt:formatDate value="${custom.birthday }" pattern="yyyy-MM-dd HH:mm:ss"/></td>--%>

                <td><a href="${pageContext.request.contextPath }/updateCustom.action?id=${custom.id }">修改</a>

                   <a href="${pageContext.request.contextPath }/deleteCustom.action?id=${custom.id }">删除</a>

                </td>

            </tr>

         </c:forEach>

      </table>

   </form>

</body>

</html>

7.2    add_custom.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

   pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript">

function showImg(thisimg) {

   var file = thisimg.files[0];

   if(window.FileReader) {

      var fr = new FileReader();

      var showimg = document.getElementById('showimg');

      fr.onloadend = function(e) {

      showimg.src = e.target.result;

   };

   fr.readAsDataURL(file);

   showimg.style.display = 'block';

   }

}

</script>

<title>添加客户</title>

</head>

<body>

   <form id="customForm"     action="${pageContext.request.contextPath}/addCustomSubmit.action"

      method="post" enctype="multipart/form-data">

      添加客户信息：

      <table width="100%" border=1>

         <tr>

            <td>客户名称</td>

            <td><input type="text" name="name" /></td>

         </tr>

         <tr>

            <td>客户邮箱</td>

            <td><input type="text" name="mail" /></td>

         </tr>

         <tr>

            <td>客户电话号码</td>

            <td><input type="text" name="phoneNumber" /></td>

         </tr>

         <tr>

            <td>客户类型</td>

            <td><select name="category">

                   <c:forEach items="${customTypes}" var="customType">

                      <%-- <option value="${customType.key }">${customType.value}</option> --%>

                      <option value="${customType.value }">${customType.value}</option>

                   </c:forEach>

            </select></td>

         </tr>

         <tr>

            <td>客户头像</td>

            <td><img id="showimg" src="" style="display:none;" />

               <input type="file" name="custom_pic" onchange="showImg(this)"/>

                </td>

         </tr>

      </table>

      <input type="submit" value="提交"> <input type="reset"

         value="重置">

   </form>

</body>

</html>

7.3    update_custom.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

   pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript">

function showImg(thisimg) {

   document.getElementById("img_old").style.display="none";

   var file = thisimg.files[0];

   if(window.FileReader) {

      var fr = new FileReader();

      var showimg = document.getElementById('showimg');

      fr.onloadend = function(e) {

      showimg.src = e.target.result;

   };

   fr.readAsDataURL(file);

   showimg.style.display = 'block';

   }

}

</script>

<title>修改客户信息</title>

</head>

<body>

   <form name="customForm"

 action="${pageContext.request.contextPath}/updateCustomSubmit.action"

      method="post" enctype="multipart/form-data">

      <input type="hidden" name="id" value="${hhCustom.id }" /> 修改客户信息：

      <table width="100%" border=1>

         <tr>

            <td>客户名称</td>

           <td><input type="text" name="name" value="${hhCustom.name }" /></td>

         </tr>

         <tr>

            <td>客户邮箱</td>

           <td><input type="text" name="mail" value="${hhCustom.mail }" /></td>

         </tr>

         <tr>

            <td>客户电话号码</td>

            <td><input type="text" name="phoneNumber"

                value="${hhCustom.phoneNumber }" /></td>

         </tr>

         <tr>

            <td>客户类型</td>

            <td><select name="category">

                  <c:forEach items="${customTypes}" var="customType">

                     <%-- <option value="${customType.key }">${customType.value}</option> --%>

                     <c:if test="${hhCustom.category==customType.value }">

                        <option value="${customType.value }" selected="selected">${customType.value }</option>

                      </c:if>

                     <option value="${customType.value }">${customType.value}</option>

                   </c:forEach>

            </select></td>

         </tr>

         <tr>

            <td>客户头像</td>

            <td><c:if test="${hhCustom.pic!=null }">

                  <img id="img_old" src="/pic/${hhCustom.pic }" width="100" height="100" />

                </c:if>

                <img id="showimg" src="" style="display:none;" width="100" height="100"/>

               <input type="file" name="custom_pic" onchange="showImg(this)"/>

            </td>

         </tr>

      </table>

      <input type="submit" value="提交"/>

   </form>

</body>

</html>

8      结果展示

8.1    添加客户

8.2    更新客户

8.3    数据库

ssm上传图片的更多相关文章

  1. MySQL+SSM+Ajax上传图片问题

    第一次写上传图片的代码,碰到很多问题.昨天做了整整一天,终于在晚上的时候成功了.大声欢呼. 但是,做完之后,还是有很多问题想不通.所以在这里也算是写个笔记,日后忘记了可以回顾,也算请教各路朋友.(^_ ...

  2. ssm异步上传图片

    1.首先引入jersey   jar包 2.在配置文件中,配置允许上传图片 3.修改增加商品页面 <%@ page language="java" import=" ...

  3. ssm框架下上传图片及其他信息

    先引入这两个包: <dependency> <groupId>commons-fileupload</groupId> <artifactId>comm ...

  4. SSM中如何上传图片

    1.文件配置 2.jsp页面 文件的name值不能跟数据库列名一致 3.控制层收集数据转发到逻辑层 4.逻辑层处理把用户信息存到数据库 5.注册成功后跳到jsp页面进行展示

  5. springmvc 多数据源 SSM java redis shiro ehcache 头像裁剪

    获取下载地址   QQ 313596790  A 调用摄像头拍照,自定义裁剪编辑头像 B 集成代码生成器 [正反双向](单表.主表.明细表.树形表,开发利器)+快速构建表单;  技术:31359679 ...

  6. springmvc 多数据源 SSM java redis

      A集成代码生成器 [正反双向(单表.主表.明细表.树形表,开发利器)+快速构建表单; freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本,处理类,servic ...

  7. spring MVC框架入门(外加SSM整合)

    spring MVC框架 一.什么是sping MVC Spring MVC属于SpringFrameWork的后续产品,已经融合在Spring Web Flow里面.Spring 框架提供了构建 W ...

  8. SpringMVC总结(SSM)

    Day1 1. springMvc:是一个表现层框架: 作用:就是从请求中接收传入的参数, 将处理后的结果数据返回给页面展示2. ssm整合: 1)Dao层 pojo和映射文件以及接口手动编写(或使用 ...

  9. ssm实现图片上传

    在使用ssm完成前后端对接时,总免不了前台传过来的文件问题,而html中的<input>框直接使用时,往往会获取不到路径,今天在完成图片上传后的来做个总结 首先,前台页面 <!DOC ...

随机推荐

  1. html块级元素与行内元素

    1.关于行内元素和快元素的说明: 根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display ...

  2. Linux（二十一）Shell编程

    21.1 为什么要学习Shell编程 (1)Linux运维工程师在进行服务器集群管理时,需要编写Shell程序来进行服务器管理. (2)对于JavaEE和Python程序员来说,工作的需要,你的老大会 ...

  3. Java多线程-线程的同步与锁【转】

    出处:http://www.cnblogs.com/linjiqin/p/3208843.html 一.同步问题提出 线程的同步是为了防止多个线程访问一个数据对象时,对数据造成的破坏. 例如:两个线程 ...

  4. Scrapy爬取豆瓣电影top250的电影数据、海报，MySQL存储

    从GitHub得到完整项目(https://github.com/daleyzou/douban.git) 1.成果展示 数据库 本地海报图片 2.环境 (1)已安装Scrapy的Pycharm (2 ...

  5. iOS webservice接口soap协议调用遇到的问题

    这是第一次调webservice的接口,并且后台没太做过移动端的接口,所以遇到了很多让人崩溃的困难.吃一堑长一智,所以这种时候懒得写博客的我就要趁着这股热乎劲把这次的过程记录下来啦~ 首先要做的就是, ...

  6. Visual Studio 201~ Code 格式检查

    前言 好的代码格式,有利于阅读和查错,慢慢的有利于养成良好的编码习惯,也可以帮我们找出一些低级错误. StyleCop 在Nuget上搜索stylecop,选择MSBuild的那个版本,安装. 手动编 ...

  7. ubuntu18.04 & Windows10 双系统关机缓慢

    1.Windows与Ubuntu双系统关机缓慢并不少见,有时单系统下的Linux mint或Ubuntu都会出现这个现象.主要原因是还有没有关闭的进程或者是软件兼容的原因,所以导致每次关机都有一个90 ...

  8. Map集合的便利学习总结

    1.Map提供了三种便利方式 1)遍历所有key. Set<K>  keySet()  该方法会将当前Map中所有key存入一个Set集合后返回. 2)遍历所有的key-value对 Se ...

  9. jmeter接口测试报java.net.SocketException: Socket closed错误。

    如题,jmeter报出java.net.SocketException: Socket closed,我查询了下,服务器是正常的,可以返回数据,基本确定问题出在我这边jmeter.查询原因,看到有人说 ...

  10. Switch在swift中的使用

    switch的简单使用: 相比 C 和 objective - C 中的 switch 语句,Swift 中的 switch 语句不会默认的掉落到每个 case 的下面进入 另一个 case.相反,第 ...