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);
}
4.常见问题
[外链图片转存失败(img-QTOH9hTu-1564973537223)(C:\Users\CX\AppData\Roaming\Typora\typora-user-images\1556886987700.png)]
-
这个问题表示没有进入到后台,原因是因为咱们后台方法中的实体类参数有问题,具体的是由实体类中的date类型的属性导致的
-
解决的办法是:在pojo类中的date类型的参数之上加入注解
@DateTimeFormat(pattern="yyyy-MM-dd")
private Date birth;
@DateTimeFormat(pattern="yyyy-MM-dd")
private Date hiredate;
三. 图片下载
1. show.jsp
<td>
<a href="/emp2/down?url=${emp.imgurl}">
<img src="${emp.imgurl}" alt="" width="100px" height="100px">
</a>
</td>
2.controller
@RequestMapping("/down")
public void down(String url, HttpSession session, HttpServletResponse response){
try {
//1.获取图片的路径
String realPath = session.getServletContext().getRealPath(url);
File f = new File(realPath);
//2.一个头,两个流
String fname=url.substring(6);
fname=new String(fname.getBytes("utf-8"),"ISO-8859-1");
FileInputStream is = new FileInputStream(f);
ServletOutputStream os = response.getOutputStream();
response.setHeader("content-disposition","attachment;filename="+fname);
IOUtils.copy(is,os);
} catch (Exception e) {
try {//出错就去工程首页
response.sendRedirect("/");
} catch (IOException e1) {
e1.printStackTrace();
}
}
}
四. 批量删除
1.实现全选和全不选
$("#checkAll").click(function () {
var isCheck=$(this).prop("checked");
if(isCheck){
$(".checkNow").prop("checked",true);
}else {
$(".checkNow").prop("checked",false);
}
});
2.携带选中的id值,使用异步提交,进入后台
/*批量删除*/
function batchDel(){
//1.创建一个数组,用于存储 选中的员工编号
var ids=new Array();
$(".checkNow:checked").each(function () {
var id=$(this).val();
ids.push(id);
});
//2.使用ajax异步请求,将参数携带到后台
if(ids.length>0){//此处必须toString()
$.post("/emp/batchDel",{ids:ids.toString()},function () {
//3.删除后,在回调函数中执行页面跳转,数据重查,并留在当前页,而不是回到第一页
location.href="/emp/search?pageNum=${pageInfo.pageNum}"
});
}
}
3.Controller中,接参,删除
//批量删除
@RequestMapping("/batchDel")
@ResponseBody//没有该注解,不会执行ajax回调函数
public void batchDel(Integer[] ids){
service.batchDel(ids);
}
4.service
@Override
public void batchDel(Integer[] ids) {
EmpExample empExample = new EmpExample();
EmpExample.Criteria c = empExample.createCriteria();
c.andIdIn(Arrays.asList(ids));//数组转换成集合
empMapper.deleteByExample(empExample);
}
注意:
1.js中的数组ids必须toString
$.post("/emp/batchDel",{ids:ids.toString()},function () {}
2.后台接收参数只能是数组,不能使用集合,否则会出现不能实例化的异常
public void batchDel(Integer[] ids){}
3.异步请求后台方法中不能直接进行页面跳转,如下所示行不通:
public String batchDel(Integer[] ids){
service.batchDel(ids);
return "redirect:emp/search"
}
4.没有responseBody注解,前台ajax中回调函数不执行,页面不跳转
@ResponseBody//没有该注解,不会执行ajax回调函数,页面不跳转
//对应jsp中的回调函数
$.post("/emp/batchDel",{ids:ids.toString()},function () {
//3.删除后,在回调函数中执行页面跳转,数据重查,并留在当前页,而不是回到第一页
location.href="/emp/search?pageNum=${pageInfo.pageNum}"
});