上传图片---SpringMVC学习笔记（十一）

需求

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

第一步：创建图片的虚拟目录，用来存储上传的图片

一般服务器中的图片会用单独的服务器存储。 
在tomcat上配置图片虚拟目录，在tomcat下conf/server.xml中添加：

<Context docBase="F:\develop\upload\temp" path="/pic" reloadable="false"/>
1
1

 
访问http://localhost:8080/pic即可访问F:\develop\upload\temp下的图片。 
注意：访问/pic表示就是直接访问路径F:\develop\upload\temp。

第二步：配置解析器

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

在springmvc.xml中配置multipart类型解析器。

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

第三步：引入上传图片需要的jar包

CommonsMultipartResolver解析器依赖commons-fileupload和commons-io，加入如下jar包： 

第四步：图片上传的controller方法

//商品修改提交    @RequestMapping("/editItemSubmit")    public String editItemSubmit(Items items, MultipartFile pictureFile)throws Exception{        //原始文件名称        String pictureFile_name =  pictureFile.getOriginalFilename();        //新文件名称        String newFileName = UUID.randomUUID().toString()+pictureFile_name.substring(pictureFile_name.lastIndexOf("."));        //上传图片        File uploadPic = new java.io.File("F:/develop/upload/temp/"+newFileName);        if(!uploadPic.exists()){            uploadPic.mkdirs();        }        //向磁盘写文件        pictureFile.transferTo(uploadPic);.....
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

第五步：图片上传的页面

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

<form id="itemForm"        action="${pageContext.request.contextPath }/item/editItemSubmit.action"        method="post" enctype="multipart/form-data">        <input type="hidden" name="pic" value="${item.pic }" />
1
2
3
4
5
1
2
3
4
5

file的name与controller形参一致：

            <tr>                <td>商品图片</td>                <td><c:if test="${item.pic !=null}">                        <img src="/pic/${item.pic}" width=100 height=100 />                        <br />                    </c:if> <input type="file" name="pictureFile" /></td>            </tr>