码迷,mamicode.com
首页 > Web开发 > 详细

7---上传图片

时间:2016-07-25 09:21:30      阅读:234      评论:0      收藏:0      [点我收藏+]

标签:

7.1需求

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

7.2  配置虚拟目录

在tomcat上配置图片虚拟目录,在tomcat下conf/server.xml中添加:

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

 访问http://localhost:8080/pic即可访问F:\develop\upload\temp下的图片。

 也可以通过eclipse配置:

7.3springmvc中对多部件类型解析

 在页面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>

 

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

技术分享

7.4 图片上传

Controller中带参数    MultipartFile items_pic   (接收商品图片)

// 原始名称
String originalFilename = items_pic.getOriginalFilename();

// 上传图片
if (items_pic != null && originalFilename != null&& originalFilename.length() > 0) {

   // 存储图片的物理路径
   String pic_path = "F:\\upload\\temp\\";

   // 新的图片名称
   String newFileName = UUID.randomUUID()+ originalFilename.substring(originalFilename.lastIndexOf("."));
    
   // 新图片
   File newFile = new File(pic_path + newFileName);

   // 将内存中的数据写入磁盘
   items_pic.transferTo(newFile);

   // 将新图片名称写到itemsCustom中
   itemsCustom.setPic(newFileName);
    
}

// 调用service更新商品信息,页面需要将商品信息传到此方法
itemsService.updateItems(id, itemsCustom);

页面:

  form添加enctype="multipart/form-data":

<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> <c:if test="${items.pic !=null}"> <img src="/pic/${items.pic}" width=100 height=100/> <br/> </c:if> <input type="file" name="items_pic"/> //file的name与controller的形参一致 </td> </tr> </table> </form>

 

 

 

7---上传图片

标签:

原文地址:http://www.cnblogs.com/mao-19/p/5702245.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!