springmvc上传图片

springmvc上传图片

1.需求

在修改商品页面，添加上传商品图片功能。

2.springmvc中对多部件类型解析

​ 在页面form中提交**enctype=“multipart/form-data”**的数据时，需要springmvc对multipart类型的数据进行解析。

XML版本 - 在dispatcher-servlet.xml中，配置multipart类型解析器

<!-- 文件上传 -->
<bean id="multipartResolver"
	class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
	<!-- 设置上传文件的最大尺寸为5MB -->
	<property name="maxUploadSize">
		<value>5242880</value>
	</property>
</bean>

JavaConfig配置类版本 - 在SpringMVCConfig类中，配置multipart类型解析器

//文件上传   多部件解析器
@Bean
public CommonsMultipartResolver multipartResolver(){
    CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver();
    multipartResolver.setMaxUploadSize(5242880);
    return multipartResolver;
}

3.加入上传图片的依赖

上边的解析内部使用下边的jar进行图片上传。

修改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.4</version>
</dependency>

4.创建图片虚拟目录存储图片

方式一：通过图形界面配置：

通过http://localhost:8081/pic/xxx.JPG测试路径

方式二：可以直接修改tomcat的配置文件：

在conf/server.xml文件，添加虚拟目录 ：

<Context docBase="D:\upfile\temp" path="/pic" reloadable="true"/>

注意：在图片虚拟目录中，一定将图片目录分级创建（提高i/o性能），一般我们采用按日期(年、月、日)进行分级创建。

5.上传图片代码

5.1 editItem.jsp页面

form添加enctype=“multipart/form-data”

file的name与controller形参名称一致

<td>
    <img src="${item.pic}" width=100 height=100 id="itemPic"/>
    <br/>
    <input type="file" name="items_pic" onchange="showPreview(this)"/>
</td>

将文件流以url形式读取，实现图片实时显示

<script type="text/javascript">
    function showPreview(source){
        var file = source.files[0];
        if(window.FileReader){
            var fr = new FileReader();
            fr.onloadend = function(e){
                document.getElementById("itemPic").src=e.target.result;
            }
            fr.readAsDataURL(file);
        }
    }
</script>

itemsList.jsp

<td>
	<c:if test="${item.pic !=null && item.pic !=''}">
		<img src="${item.pic}" width=100 height=100/>
	</c:if>
</td>

5.2 controller方法

商品修改controller方法：

上传图片代码：

//更新商品信息   method={RequestMethod.GET},限制http请求方法为get 
@RequestMapping(value="/updateItem.action",method={RequestMethod.POST,RequestMethod.GET})
public String updateItem(
    Model model,
	@ModelAttribute("item") @Validated(value={ValidateGroup1.class}) Items items,
	BindingResult bindingResult,
	MultipartFile items_pic
) throws Exception{
		
    //获取错误信息
    if(bindingResult.hasErrors()){
        List<ObjectError> errors = bindingResult.getAllErrors();
        for (ObjectError objectError : errors) {
            System.out.println("--->"+objectError.getDefaultMessage());
        }
        //将错误信息展示到jsp页面显示
        model.addAttribute("errors", errors);
        //model.addAttribute("item", items);
        return "../items/editItem.jsp";
    }

    if(items_pic!=null){
        String oldName = items_pic.getOriginalFilename();
        if(oldName!=null && oldName.length()>0){
            String newName = UUID.randomUUID()
                +oldName.substring(oldName.lastIndexOf("."));

            items_pic.transferTo(new File("E:/temp/"+newName));
            items.setPic("/pic/"+newName);
        }
    }

    itemsService.updateItem(items);
    //响应重定向：不能传递数据，地址栏url将发生变化，将显示目标地址 ，防止表单重复提交
    return "redirect:queryItemsList.action";
    //请求转发：传递数据，地址栏url不变化
    //return "forward:queryItemsList.action";
}