需求:在修改商品页面,添加上传商品图片功能。
SpringMVC中对多部件类型解析:
1)springmvc中配置:
<!-- 文件上传 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 设置上传文件的最大尺寸为5MB -->
<property name="maxUploadSize">
<value>5242880</value>
</property>
</bean>
需要加入的jar包:(上边的解析器就是使用下面的jar包进行图片上传)
commons-fileupload-1.2.2.jar;
commons-io-2.4.jar
2)editItems.jsp中form的enctype要设置为“multipart/form-data”;
<%@ 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">
<title>修改商品信息</title> </head>
<body> <!-- 显示错误信息 -->
<c:if test="${allErrors!=null}">
错误信息:<br/>
<c:forEach items="${allErrors}" var="error">
${error.defaultMessage}<br/>
</c:forEach>
</c:if> <form id="itemForm" action="${pageContext.request.contextPath }/items/editItemsSubmit.action" method="post" enctype="multipart/form-data">
<input type="hidden" name="id" value="${items.id }"/>
修改商品信息:
<table width="100%" border=1>
<tr>
<td>商品名称</td>
<td><input type="text" name="name" value="${items.name }"/></td>
</tr>
<tr>
<td>商品价格</td>
<td><input type="text" name="price" value="${items.price }"/></td>
</tr>
<tr>
<td>商品生产日期</td>
<td><input type="text" name="createtime" value="<fmt:formatDate value="${items.createtime}" pattern="yyyy-MM-dd HH:mm:ss"/>"/></td>
</tr>
<tr>
<td>商品图片</td>
<td>
<c:if test="${items.pic !=null}">
<img src="/pic/${items.pic}" width=100 height=100/>
<br/>
</c:if>
<input type="file" name="items_pic"/>
</td>
</tr>
<tr>
<td>商品简介</td>
<td>
<textarea rows="3" cols="30" name="detail">${items.detail }</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="提交"/>
</td>
</tr>
</table>
</form>
</body>
</html>
3)controller中代码:
这里是设置tomcat的虚拟目录的:在tomcat中图片访问路径是/pic,真实的物理地址是D:\upload\images;
对应tomcat conf/server.xml中的配置是:
<Context docBase="D:\upload\images" path="/pic" reloadable="false"/>
Contorller处理上传文件,并将文件名设置到数据库代码:
//商品信息修改提交
@RequestMapping("/editItemsSubmit")
public String editItemsSubmit(Model model,
HttpServletRequest request,
Integer id,
@Validated(value={ValidGroup1.class}) ItemsCustom itemsCustom,BindingResult bindingResult,
MultipartFile items_pic)
throws Exception {
if(bindingResult.hasErrors()){
List<ObjectError> allErrors = bindingResult.getAllErrors();
for(ObjectError objectError : allErrors){
System.out.println(objectError.getDefaultMessage());
} // 将错误信息传到页面
model.addAttribute("allErrors", allErrors); //可以直接使用model将提交pojo回显到页面
model.addAttribute("items", itemsCustom); return "items/editItems";
} String originalFilename = items_pic.getOriginalFilename(); if(items_pic!=null && originalFilename!=null && originalFilename.length()>0){
String pic_path = "D:\\upload\\images\\";
String newFileName = UUID.randomUUID() + originalFilename.substring(originalFilename.lastIndexOf(".")); //新图片
File newFile = new File(pic_path + newFileName); items_pic.transferTo(newFile); itemsCustom.setPic(newFileName);
} itemsService.updateItems(id, itemsCustom);
return "success";
}
上传图片成功:
4)修改代码将图片上传到项目路径中WebRoot/resources/images:
新建存放图片的文件夹:
我这边先是在web-inf下面放的图片;工程是发布在org.eclipse.wst.server.core\tmp0\wtpwebapps下面;做了好几次实验,页面上就是不能展示修改后的图片;
后来把工程发布在tomcat的安装目录、资源文件放在项目根路径/WebRoot下面resources的;
//商品信息修改提交
//MultipartFile 接收商品图片
@RequestMapping("/editItemsSubmit")
public String editItemsSubmit(Model model,
HttpServletRequest request,
Integer id,
@Validated(value={ValidGroup1.class}) ItemsCustom itemsCustom,BindingResult bindingResult,
MultipartFile items_pic)
throws Exception {
if(bindingResult.hasErrors()){
List<ObjectError> allErrors = bindingResult.getAllErrors();
for(ObjectError objectError : allErrors){
System.out.println(objectError.getDefaultMessage());
} // 将错误信息传到页面
model.addAttribute("allErrors", allErrors); //可以直接使用model将提交pojo回显到页面
model.addAttribute("items", itemsCustom); return "items/editItems";
} //文件原始名称
String originalFilename = items_pic.getOriginalFilename(); if(items_pic!=null && originalFilename!=null && originalFilename.length()>0){ /*
* 1 这里上传到tomcat部署环境下面的WebRoot/resources/images/下面了
* 因为真正项目部署后运行环境,这里就想传到这个下面;
*/
String basePath = request.getServletContext().getRealPath("resources/images/");
System.out.println("文件保存路径--------------------------->>" + basePath);
//String basePath = request.getServletContext().getRealPath("WEB-INF/resources/images/");
//E:\jdbcWorkspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\springMVC\WEB-INF\resources\images\ /* 2 1和2的效果是一摸一样;
System.out.println("类名:-------------------------------" + this.getClass().getName());
//ItemsController
String basePath = this.getClass().getClassLoader().getResource("../../WEB-INF/resources/images/").getPath();
System.out.println("文件保存路径--------------------------" + basePath);
//E:\jdbcWorkspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\springMVC\WEB-INF\resources\images\
*/ //新的图片名称
String newFileName = UUID.randomUUID() + originalFilename.substring(originalFilename.lastIndexOf(".")); //新图片
File newFile = new File(basePath + newFileName); //将内存中的数据写入磁盘
items_pic.transferTo(newFile); itemsCustom.setPic(newFileName);
} itemsService.updateItems(id, itemsCustom);
return "success";
}
springmvc.xml中配置了静态资源访问:
看到说这个的前提是配置了注解驱动:mvc:annotation-driven
<!-- 对静态资源文件的访问
mapping:映射
两个*,它表示映射resources/下所有的URL,包括子路径(即接多个/)
location:本地资源路径,默认是webapp根目录下的路径。
WEB-INF是Java的WEB应用的安全目录。所谓安全就是客户端无法访问,只有服务端可以访问的目录。
-->
<mvc:resources mapping="/resources/**" location="/resources/" />
editItems.jsp:
<tr>
<td>商品图片</td>
<td>
<c:if test="${items.pic !=null}">
<img src="${pageContext.request.contextPath }/resources/images/${items.pic}" width=100 height=100/>
<br/>
</c:if>
<input type="file" name="items_pic"/>
</td>
</tr>
页面上再上传图片,能够看到:
图片保存在tomcat/webapps/springMVC/resources/images下面: