图片上传

一.创建图片虚拟目录

在上传图片之前,先要设置虚拟目录

  • 打开工具栏的运行配置Edit Configurations
  • 添加物理目录和并设置虚拟目录路径

    图片 1

图片 2

  • 添加img图片在img文件夹内

图片 3

  • 测试访问:)

在上传图片之前,先要设置虚拟目录

  1. 在工程依赖库下添加文件上传jar包

二.SpringMVC上传头像

  • 打开工具栏的运行配置Edit Configurations
  • 添加物理目录和并设置虚拟目录路径

commons-fileupload-1.2.2.jar

1.SpringMVC对多部件类型的解析
  • 上传图片SpringMVC.xml配置

在页面form中提交enctype=”multipart/form-data”的数据时,需要springmvc对multipart类型的数据进行解析。在springmvc.xml中配置multipart类型解析器。

<!--文件上传--> <bean id ="multipartResolver" > <property name="maxUploadSize"> <value>5242880</value> </property> </bean>

图片 4创建图片虚拟图片 5创建图片虚拟

commons-io-2.4.jar

2.添加依赖
<!-- 文件上传 --><dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.1</version></dependency>
  • 添加img图片在img文件夹内

    图片 6在目录中放入图片

  • 测试

    图片 7测试

2.jsp页面设置form表单属性enctype

3. 在Login1.jsp页面form中提交enctype=”multipart/form-data”的数据
<form action="/userController/insertUser" method="post" enctype="multipart/form-data"> <input type="text" required="required" placeholder="用户名" name="userName"> <input type="password" required="required" placeholder="密码" name="passWord"> <input type="file" name = "imgFile"> <div > <input type="submit" value="注册"> <a href="register.jsp"><input type="button" value="返回登录"></a> </div> </form> 

图片 8

1 添加依赖
<!-- 文件上传 --><dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.1</version></dependency>

在表单中上传图片时,需要在form的属性设置中添加enctype=”multipart/form-data”。

4.处理请求UserController.java
 @RequestMapping("insertUser") public String insertUser (HttpServletRequest request, User user, MultipartFile imgFile) throws IOException { //获取文件原始名称 String originalFilename = imgFile.getOriginalFilename(); //上传图片 if(imgFile!=null && originalFilename!=null && originalFilename.length{ //存储图片的物理路径 String pic_path = "/home/ubuntu/IDEA/SSM/img/"; //新的图片名称 String newFileName = UUID.randomUUID() + originalFilename.substring(originalFilename.lastIndexOf; //新图片 File newFile = new File(pic_path+newFileName); //将内存中的数据写入磁盘 imgFile.transferTo; userService.insertUser(user,newFileName); HttpSession session = request.getSession(); session.setAttribute("imgUrl", newFileName); } return "item/success"; }

图片 9上传成功

  • 成功跳转页面success.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <title>成功</title></head><body><h1>成功页面</h1><img style="width: 150px; height: 200px" src="http://localhost:8080/img/<%=session.getAttribute%>"></body></html>

图片 10

2 springmvc配置
<!--文件上传 图片大小5M--> <bean id ="multipartResolver" > <property name="maxUploadSize"> <value>5242880</value> </property> </bean>

[html] view plain copy

3 form表单配置

在页面form中提交enctype=”multipart/form-data”的数据时,需要springmvc对multipart类型的数据进行解析。在springmvc.xml中配置multipart类型解析器。

.......省略<form action="${pageContext.request.contextPath}/items/editItemsSubmit.action" method="post" enctype="multipart/form-data">.......省略</form>.......省略
<form id="itemForm" action="${pageContext.request.contextPath }/items/editItemsSubmit.action" method="post" enctype="multipart/form-data" >  
4 controller层编辑
 @RequestMapping(value = "/editItemsSubmit") public String editItemsSubmit(Model model, Integer id, @Validated(value = ValidGroup1.class) ItemsCustom itemsCustom, BindingResult bindingResult, MultipartFile multipartFile) throws Exception { //异常处理 if (bindingResult.hasErrors { List<ObjectError> allErrors = bindingResult.getAllErrors(); for (ObjectError objectError : allErrors) { System.out.println(objectError.getDefaultMessage; } model.addAttribute("allErrors", allErrors); model.addAttribute("itemsCustom", itemsCustom); return "editItems"; } //上传图片 //获取文件原始名 String originalFilename = multipartFile.getOriginalFilename(); if (multipartFile != null && originalFilename!=null && originalFilename.length{ //存储图片物理物理路径 String pic_path = "E:\IdeaProjects\ssm_itemsDemo\pic\"; //新图片名称 String newFileName = UUID.randomUUID()+originalFilename.substring(originalFilename.lastIndexOf; //新图片 File newFile = new File(pic_path+newFileName); //将内存中的数据写入磁盘 multipartFile.transferTo; //将新图片名称写到itemsCustom itemsCustom.setPic(newFileName); } itemsService.updateItems(id, itemsCustom); return "success"; }

表单中enctype=”multipart/form-data”的意思,是设置表单的MIME编码。默认情况,这个编码格式是application/x-www-form-urlencoded,不能用于文件上传;只有使用了multipart/form-data,才能完整的传递文件数据,进行下面的操作.
enctype=”multipart/form-data”是上传二进制数据;form里面的input的值以2进制的方式传过去。

5 页面配置
 <tr> <td>商品图片</td> <td> <c:if test="${itemsCustom.pic!=null}"> <img src="/pic/${itemsCustom.pic}" width="100px" height="100px"><br> </c:if> <input type="file" name="multipartFile"></td> </tr>

图片 11测试图片 12数据库

  1. springMVC.xml添加multipart类型解析器

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website