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 ...

随机推荐

RDC去省赛玩前の日常训练 Chapter 2
2018.4.9 施展FFT ing! 马上就要和前几天学的斯特林数双剑合璧了!
form表单序列化为Jquery对象
<form id="DailyFinancial" > @*class="form-inline"*@ <div class="fo ...
nginx配置 location及rewrite规则详解
1. location正则写法语法规则: location [=|~|~*|^~] /uri/ { … } = 开头表示精确匹配 ^~ 开头表示uri以某个常规字符串开头,理解为匹配 url ...
DDGScreenShot — 复杂屏幕截屏（如view ScrollView webView wkwebView）
写在前面最近有这么一个需求,分享页面,分享的是web订单截图,既然是web 就会有超出屏幕的部分, 生成的图片还要加上我们的二维码,这就涉及到图片的合成了. 有了这样的需求,就是各种google.也 ...
基于Cloudera Search设计数据灾备方案
当实际项目上线到生产环境中,难以避免一些意外情况,如数据丢失.服务器停机等.对于系统的搜索服务来说,当遇到停机的情况意味着在停机这段时间内,用户都不能通过搜索的相关功能进行访问数据,停机意味着将这一段 ...
Mina框架(实战详解)
Apache Mina Server 是一个网络通信应用框架,为开发高性能和高可用性的网络应用程序提供了非常便利的框架. 特点:异步的NIO框架,将UDP当成"面向连接"的协议一 ...
Unity pdb2mdb错误
错误: D:\sandbox\sandbox_art\sandbox_artprj\Assets\Plugins\Sandbox\Editor>"C:\ProgramFiles/Uni ...
cocos2dx中的坐标系统
一. (1)OpenGL坐标系 Cocos2D-x以OpenGL和OpenGL ES为基础,所以自然支持OpenGL坐标系.该坐标系原点在屏幕左下角,x轴向右,y轴向上. (2)屏幕坐标系屏幕坐标系 ...
File,FileInfo,FileStream,StreamReader的区别与用法
概括的说,File,FileInfo,FileStream是用于文件 I/O 的类,StreamReader是用于从流读取和写入流的类,使用之前都需using System.IO. 先定义一个TXT文 ...
nginx+php+mysql+wordpress搭建简单站点安装及配置过程
环境阿里云ECS云服务器 CPU:1核内存:2G 操作系统:Centos 7.3 x64 地域:华北 2(华北 2 可用区 A) 系统盘:40G 安装及配置主要使用 nginx . php 和 ...

ssm上传图片