spring mvc 文件上传+本地预览+一次提交

转自 http://wdhdmx.iteye.com/blog/1092792

参考：http://club.jledu.gov.cn/?uid-5282-action-viewspace-itemid-188672

 

加上传功能，不影响原来数据和对象的获取。

1.修改spring mvc的配置文件，我的是webmvc-config.xml。加入

Xml代码  

1. <bean id="multipartResolver"  
2. class="org.springframework.web.multipart.commons.CommonsMultipartResolver">  
3.   <!-- 以字节为单位的最大上传文件的大小 -->  
4.   <property name="maxUploadSize" value="1000000" />  
5.  </bean>  

2.加入两个依赖的jar包（spring官网可以下载到对应版本的常用依赖jar包）：

    com.springsource.org.apache.commons.io-1.4.0.jar
    com.springsource.org.apache.commons.fileupload-1.2.2.jar

3.页面中的值。注意表单的file的name为"file"

   <form action="upload.do" method="post" enctype="multipart/form-data">
    <input name="file" type="file" >
    <input type="submit">
    </form>

  form中依然可以写其他的文本框，单选框，下拉框，等等，后台依旧能同时获取

4.在后台的Controller层的upload方法中的HttpServletRequest request 改变为 DefaultMultipartHttpServletRequest request

完整的后台代码

Java代码  

1. @RequestMapping(value="/upload")  
2.     public String update(DefaultMultipartHttpServletRequest request){  
3.       CommonsMultipartFile file = (CommonsMultipartFile) request.getFile("file");   
4.       //这里的file就是前台页面的name  
5.         if(file.isEmpty()){  
6.             return null;  
7.         }  
8.         //获取路径，生成完整的文件路径,当然要先<span style="color: #ff0000;">创建upload文件夹</span>  
9. 了。  
10.         String fileName = request.getRealPath("upload")+File.separator+System.currentTimeMillis()+file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));  
11.         File uploadFile = new File(fileName);  
12.         try {  
13.             //上传  
14.             FileCopyUtils.copy(file.getBytes(), uploadFile);  
15.         } catch (IOException e) {  
16.             e.printStackTrace();  
17.         }  
18.         return null;  
19.  }  

 5.页面加预览

页面的详细代码，加本地预览（火狐能用，IE9不能)

Html代码  

1. <script type="text/javascript">  
2.    function changePicUrl(){  
3.         var dFile = document.getElementById('file');  
4.         var dImg = document.getElementById('pic');  
5.         if(dFile.files){  
6.             dImg.src = dFile.files[0].getAsDataURL();//这里不懂？？  
7.             }else   
8.             if(dFile.value.indexOf('\\') > -1 || dFile.value.indexOf('\/') > -1){  
9.                 dImg.src = dFile.value;  
10.             }  
11.         }  
12.   </script>  
13.    <form action="head/upload.html" method="post" enctype="multipart/form-data">  
14.     上传文件<input name="file" type="file" onchange="changePicUrl()">  
15.     <img name="pic" id="pic" alt="" src="">  
16.     <input type="submit">  
17.    </form>