ssm上传图片
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 ...
随机推荐
- java使用Myeclipse创建Hibernate项目碰到的诸多问题总结
这两天一直在搞Myeclipse创建Hibernate的1对多映射. 由于缺乏经验,可算是把我坑惨了.控制台是不停地报错啊~~~~我差点就崩溃了. 1.看的是慕课网的Hibernate一对多映射教程, ...
- 如何利用Python网络爬虫抓取微信朋友圈的动态（上）
今天小编给大家分享一下如何利用Python网络爬虫抓取微信朋友圈的动态信息,实际上如果单独的去爬取朋友圈的话,难度会非常大,因为微信没有提供向网易云音乐这样的API接口,所以很容易找不到门.不过不要慌 ...
- php获取汉字首字母实例
在我们实际开发工作中,有时候需要获取输入汉字的首字母,然后存到库中,方便用户搜索相关信息,下面给出php代码,留做备用: //新添加获取汉子首字,首字字母 function pinyin($zh){ ...
- 再次实践 MySQL chart - 每天5分钟玩转 Docker 容器技术（166）
学习了 chart 结构和模板的知识后,现在重新实践一次 MySQL chart,相信会有更多收获. chart 安装前的准备 作为准备工作,安装之前需要先清楚 chart 的使用方法.这些信息通常记 ...
- 初探Margin负值(转)
相对而言,margin 负值的使用机率在布局中似乎很少,但是我相信一旦你开始掌握就会着迷,接下来我们看看关于margin负值的一些资料: 它是一个有效的属性,至少w3c中明确描述如下:”Negativ ...
- Python Cook函数笔记 【第一章】
2017年4月28日 19:29:52 解压赋值给多个变量 可迭代的对象(list,tuple,string,文件对象,迭代器,生成器等),都可以进行解压赋值给多个对象. #!/usr/bin/env ...
- Python_json
import json ''' Python内置了json包来帮助我们完成对json的操作. 将Python的字典结构导出到json使用json.dumps(),将json读成Python的字典结构, ...
- Linux Ubuntu 16.04 初次安装使用总结zzz
装了两天的ubuntu系统终于算是勉强能用了,来来回回装了有三四次,期间出了各种各样的毛病.但是还是被我的Google大法给治好了.为了装这个系统,算是耗了两天的时间,啥事情都没干,干耗在这上面了.所 ...
- ExecutorCompletionService分析及使用
当我们通过Executor提交一组并发执行的任务,并且希望在每一个任务完成后能立即得到结果,有两种方式可以采取: 方式一: 通过一个list来保存一组future,然后在循环中轮训这组future,直 ...
- SSM-Spring-10：Spring中cglib动态代理
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 何为动态代理,就不扯皮了,上一篇博客刚刚提到,那cglib动态代理又怎么写,我拿个和上个例子相似的案例来写 具 ...