版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
ssm实现增删改和图片上传
一. 准备工作
1.pom.xml添加图片上传依赖
<!--图片上传依赖-->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.2</version>
</dependency>
<dependency>
<groupId>commons-logging</groupId>
<artifactId>commons-logging</artifactId>
<version>1.2</version>
</dependency>
<!-- fastjson -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.47</version>
</dependency>
2.spring核心配置文件中加入上传配置信息
<!-- 文件上传的配置 若没有该配置 MultipartFile file对象将为null-->
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding" value="UTF-8"/>
<property name="maxUploadSizePerFile" value="1048576"/><!--单个文件最大1M-->
<property name="maxUploadSize" value="10485760"/><!--总文件最大10M-->
</bean>
3.web.xml中配置url编码拦截器
<!--解决图片中文乱码 -->
<filter>
<filter-name>urlFilter</filter-name>
<filter-class>com.kgc.filter.UrlFilter</filter-class>
<init-param>
<param-name>DEFAULT_URI_ENCODE</param-name>
<param-value>UTF-8</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>urlFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
二.ajax异步实现图片上传
- 图片上传服务器
- 返回存储路径url
1.add.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>Title</title>
<script src="/js/jquery-3.3.1.min.js"></script>
<script src="/js/jquery.form.js"></script><%--该标签不能为单标签--%>
</head>
<body>
<form action="" method="post" id="form1">
姓名：<input type="text" name="name"><br>
年龄：<input type="text" name="age"><br>
性别：<input type="text" name="sex"><br>
工资：<input type="text" name="salary"><br>
津贴：<input type="text" name="bonus"><br>
生日：<input type="date" name="birth"><br>
入职时间：<input type="date" name="hiredate"><br>
上级：<input type="text" name="leader"><br>
部门：<select name="deptid">
<option value="0">--请选择--</option>
<c:forEach var="dept" items="${depts}">
<option value="${dept.id}">${dept.dname}</option>
</c:forEach>
</select><br>
图像上传：<input type="file" name="mf" id="upload">
<img src="" alt="图片预览" id="img" style="width: 100px;height: 100px">
<input type="hidden" name="url" id="url"><br>
<input type="submit" value="新增">
</form>
</body>
<script>
$("#upload").change(function () {
//注意:由于你是用的是jquery.form基于jquery的form表单的形式传值
//所以,不需要出现data属性
var $form={
type:'post',
url:'/emp/upload',
dataType:'json',
success:function(data){
//目的是把data里的url属性赋给img标签里的src属性值
$("#img").attr("src",data.url);
$("#url").val(data.url);
}
};
//是基于form表单上传提交,
$("#form1").ajaxSubmit($form);
});
</script>
</html>
- 注意：使用jquery.form插件实现文件上传
<%--注意两个标签导入的先后顺序--%>
<script src="/js/jquery-3.3.1.min.js"></script>
<script src="/js/jquery.form.js"></script><%--script标签不能为单标签--%>
2.controller
//图片上传表单的onchange事件触发执行该方法
//使用ajax保存图片到服务器磁盘，并返回json格式的图片url
@RequestMapping("/upload")
@ResponseBody
public String upload(@RequestParam(value = "mf",required = false)MultipartFile mf,
HttpSession session) {
//1.获取上传文件的存储地址
String realPath = session.getServletContext().getRealPath("/imgs");
System.out.println("文件存储路径："+realPath);
//2.获取上传文件的名称
String fname = mf.getOriginalFilename();
//3.重新定义文件名称--加上前缀
fname = System.currentTimeMillis() + UUID.randomUUID().toString() + fname;
//4.设置上传文件的大小
JSONObject json = new JSONObject();
if (mf.getSize() > 1048576) {//不能超过上限
json.put("err","文件大于1M,不能上传");
} else {
//5.开始上传
try {
File file = new File(realPath, fname);
if(!file.exists()){
file.mkdirs();
}
mf.transferTo(file);
} catch (IOException e) {
json.put("err","上传失败");
}
//6.存入url
json.put("url","/imgs/"+fname);
}
return json.toJSONString();
}
三. 执行新增
1. 在add页面html里加入url的隐藏域,并且在上传的js方法中进行动态赋值
<input type="hidden" name="url" id="url"><br>
$("#url").val(data.url);
2.controller
@RequestMapping("/add1")//跳转到新增页面
public ModelAndView add1(ModelAndView mav){
//1.查询所有的部门
List<Dept> depts= service.selectDepts();
//2.存进request域中
mav.addObject("depts",depts);
mav.setViewName("add");
return mav;
}
@RequestMapping("/add2")//实现新增
public String add2(Emp emp){
int i=service.addEmp(emp);
return "redirect:search";//重定向去查询一次，回到show.jsp
}
-
show.jsp展示上传的图片
<td><img src="${emp.url}" alt="大头贴" style="width: 100px;height: 100px"></td>
3.Service实现类
@Override
public int addEmp(Emp emp) {
return empMapper.insertSelective(emp);
}
-
这个问题表示没有进入到后台,原因是因为咱们后台方法中的实体类参数有问题,具体的是由实体类中的date类型的属性导致的
-
解决的办法是:在pojo类中的date类型的参数之上加入注解
@DateTimeFormat(pattern="yyyy-MM-dd")
private Date birth;
@DateTimeFormat(pattern="yyyy-MM-dd")
private Date hiredate;