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. 哈夫曼树【最优二叉树】【Huffman】

    [转载]只为让价值共享,如有侵权敬请见谅! 一.哈夫曼树的概念和定义 什么是哈夫曼树? 让我们先举一个例子. 判定树:         在很多问题的处理过程中,需要进行大量的条件判断,这些判断结构的设 ...

  2. java 通过HttpURLConnection与servlet通信

    研究了一天才搞清楚,其实挺简单的,在这里记录下,以便以后参考. 一.创建一个servlet项目 主要包括(WEB-INF)里面有classes文件夹.lib文件夹.web.xml文件. 将写好的ser ...

  3. SpringBoot Whitelabel Error Page This application has no explicit mapping for /error, so you are seeing this as a fallback.

    使用SpringBoot写HelloWorld,当配置好启动类后,再创建新的controller或其它类,启动项目后访问对应的映射名,页面显示: Whitelabel Error Page This ...

  4. python之文件操作(基础）

    文件操作作为python基础中的重点,必须要掌握. 1.默认我们在本地电脑E盘新建wp.txt文件进行测试,文件内容如下设置. 2.进行代码编写: f=open("E://wp.txt&qu ...

  5. Scrapy爬虫框架第三讲（linux环境）

    下面我们来学习下Spider的具体使用: 我们已上节的百度阅读爬虫为例来进行分析: 1 # -*- coding: utf-8 -*- 2 import scrapy 3 from scrapy.li ...

  6. python+selenium 环境搭建以及元素定位

    在给公司同事给培训了WEB自动化框架,现在和大家分享交流下

  7. app电量测试

    一．测试前准备 样本A:商家端2.6.4版本为基准样本(即旧版本): 样本B:商家端2.6.5版本(未正式上线,可找RD协助打包): 推荐Android 5.0及以上手机2台或多台(根据RD本次测试需 ...

  8. Scala学习笔记：重要语法特性

    1.变量声明 Scala 有两种变量, val 和 var  val的值声明后不可变,var可变 val msg: String = "Hello yet again, world!&quo ...

  9. http://www.runoob.com/lua/lua-basic-syntax.html

    Lua优点及特性 Lua 是一个小巧的脚本语言. 其设计目的是为了嵌入应用程序中,从而为应用程序提供灵活的扩展和定制功能.Lua由标准C编写而成,几乎在所有操作系统和平台上都可以编译,运行.Lua并没 ...

  10. Creating your own auto-configuration

    44. Creating your own auto-configuration If you work in a company that develops shared libraries, or ...