SSM
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.multipartmons.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="" %>
<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")@ResponseBodypublic 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.存入urljson.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实现类
@Overridepublic 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
@Overridepublic 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}"});
发布评论