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上传图片的更多相关文章

MySQL+SSM+Ajax上传图片问题
第一次写上传图片的代码,碰到很多问题.昨天做了整整一天,终于在晚上的时候成功了.大声欢呼. 但是,做完之后,还是有很多问题想不通.所以在这里也算是写个笔记,日后忘记了可以回顾,也算请教各路朋友.(^_ ...
ssm异步上传图片
1.首先引入jersey jar包 2.在配置文件中,配置允许上传图片 3.修改增加商品页面 <%@ page language="java" import=" ...
ssm框架下上传图片及其他信息
先引入这两个包: <dependency> <groupId>commons-fileupload</groupId> <artifactId>comm ...
SSM中如何上传图片
1.文件配置 2.jsp页面文件的name值不能跟数据库列名一致 3.控制层收集数据转发到逻辑层 4.逻辑层处理把用户信息存到数据库 5.注册成功后跳到jsp页面进行展示
springmvc 多数据源 SSM java redis shiro ehcache 头像裁剪
获取下载地址 QQ 313596790 A 调用摄像头拍照,自定义裁剪编辑头像 B 集成代码生成器 [正反双向](单表.主表.明细表.树形表,开发利器)+快速构建表单; 技术:31359679 ...
springmvc 多数据源 SSM java redis
A集成代码生成器 [正反双向(单表.主表.明细表.树形表,开发利器)+快速构建表单; freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本,处理类,servic ...
spring MVC框架入门(外加SSM整合)
spring MVC框架一.什么是sping MVC Spring MVC属于SpringFrameWork的后续产品,已经融合在Spring Web Flow里面.Spring 框架提供了构建 W ...
SpringMVC总结(SSM)
Day1 1. springMvc:是一个表现层框架: 作用:就是从请求中接收传入的参数, 将处理后的结果数据返回给页面展示2. ssm整合: 1)Dao层 pojo和映射文件以及接口手动编写(或使用 ...
ssm实现图片上传
在使用ssm完成前后端对接时,总免不了前台传过来的文件问题,而html中的<input>框直接使用时,往往会获取不到路径,今天在完成图片上传后的来做个总结首先,前台页面 <!DOC ...

随机推荐

C#语言中的XmlSerializer类的XmlSerializer.Deserialize (Stream)方法举例详解
包含由指定的 XML 文档反序列化 Stream. 命名空间: System.Xml.Serialization程序集: System.Xml(位于 System.Xml.dll) 注意: 反序 ...
大型EMR电子病历源码三甲医院医疗信息管理系统软件网络版
详情请点击查看开发环境 :VS2010 + C# + ORACLE系统简介:1各种记录的书写,并可保留修改痕迹在各种记录的书写过程中,根据系统提供的首次护理记录.一般护理记录.术前术后护理记录等模 ...
hadoop is running beyond virtual memory limits问题解决
单机搭建了2.6.5的伪分布式集群,写了一个tf-idf计算程序,分词用的是结巴分词,使用standalone模式运行没有任何问题,切换到伪分布式模式运行一直报错: hadoop is running ...
html5 标签在 IE 下使用
(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datal ...
NPOI生成不规则Excel表格（并以流的形式下载，不将文件保存在服务器上，直接在客户端导出excel）
//下载NPOI类库并添加引用 using NPOI.SS.UserModel; using NPOI.HSSF.UserModel; using NPOI.SS.Util; public stati ...
python中@classmethod @staticmethod区别
Python中3种方式定义类方法, 常规方式, @classmethod修饰方式, @staticmethod修饰方式. class A(object): def foo(self, x): prin ...
微信小程序-获取地理位置
近期公司使用微信小程序开发一套应用,涉及到使用小程序的获取地理位置接口,但是在使用测试过程中发现获取的经纬度偏差较大, 之后进行了一番搜索,终于找到了, 原文地址:http://blog.csdn.n ...
echarts3 迁徙图迁入迁出
geoCoordMap = { '上海': [121.4648,31.2891], '佛山': [112.8955,23.1097], '保定': [115.0488,39.0948], '兰州': ...
怎么解决你的小程序有“bug”的问题？
为了避免小程序在开发运行之后出现"bug"无法知晓,Fundebug研发的小程序bug监控服务作为小程序的运维中心,很好的解决了这个问题. 该插件可以监控小程序中的所有函数调用: ...
SSM-SpringMVC-30：SpringMVC中InitBinder的骇客级优化
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 上篇博客利用initbinder做了局部的日期类型转换,但是兼容性不要,只支持yyyy-MM-dd这种,所以 ...

ssm上传图片