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

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

 

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

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

<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
  <!-- 以字节为单位的最大上传文件的大小 -->
  <property name="maxUploadSize" value="1000000" />
 </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

完整的后台代码

@RequestMapping(value="/upload")
    public String update(DefaultMultipartHttpServletRequest request){
      CommonsMultipartFile file = (CommonsMultipartFile) request.getFile("file"); 
      //这里的file就是前台页面的name
        if(file.isEmpty()){
            return null;
        }
        //获取路径，生成完整的文件路径,当然要先创建upload文件夹
了。
        String fileName = request.getRealPath("upload")+File.separator+System.currentTimeMillis()+file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
        File uploadFile = new File(fileName);
        try {
            //上传
            FileCopyUtils.copy(file.getBytes(), uploadFile);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return null;
 }

 5.页面加预览

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

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

 这个本地显示的代码还不大懂，怎么不支持ie9？

上传完毕。

 

 

评论

1 楼 fangsj 2013-08-29  

IE9 安全设置 把这个禁用掉了