Ext+Spring Mvc实现文件上传

   

刚开始实习就接了个项目,开始跟着公司“老人”做项目,刚开始时,老人们定下了项目使用框架,什么也没说,只是给我们发了框架,让我们自己研究,花了一天时间,终于研究懂了点,页面前端使用extjs,后台是spring mvc,虽然自己以前从未用过这玩意,但是老人们说了,框架是拿来用的,不是现在用来学习的,我就照猫画虎的做了些练习,最后也跟上的项目进度。下面把自己在项目中做的Extjs+spring mvc 实现的文件上传和下载部分跟大家共享一下。

 

用户必须能够上传图片,因此需要文件上传的功能。比较常见的文件上传组件有Commons FileUpload和COS FileUpload,Spring已经完全集成了这两种组件,对应的包分别是:

Package org.springframework.web.multipart.commons

Package org.springframework.web.multipart.cos

当是我用的是Commons FileUpload

 

Extjs代码:

var addForm = new Ext.FormPanel({            		//构造一个新增form
					layout: 'form',
			        labelWidth: 90,     
			        frame:true,
			        bodyStyle:'padding:5px 5px 0',
			        defaults: {width: 200},
			        defaultType: 'textfield',	
			        fileUpload: true,		       		       
			        method:'POST', 	
			        enctype:'multipart/form-data',		       
			        items:addItems
			        
				});
var addItems = {
		        	     fieldLabel: '上传文件',
			              inputType:'file',				             	              		    
			              id:'fileRes', 			              
			              name:'fileRes',			             			          
			              allowBlank:false,
			              blankText: '文件不能为空!',
			              		   
	                         
	                }
var doSave=function(){
           var fileFullName = Ext.getCmp("fileRes").getValue();//上传文件全名	       	        
	       	        var startfile = fileFullName.lastIndexOf(".")+parseInt(1);  	       
					var fileType = fileFullName.substring(startfile).toUpperCase();//截取文件后缀	
alert(fileType);
					var fileKey = Ext.getCmp("fileTypeComb").getValue();
				    var Index = fileTypeStore.find("selectKey",fileKey); 
				    var fileValue = "";
			          if(Index!=-1){
			          	//通过索引取得记录ds中的记录集
			          	var TypeRecord = fileTypeStore.getAt(Index); 
			          	//返回记录集中的value字段的值
			          	fileValue = TypeRecord.data.selectName;	//获取选择的文件类型
			          	}
			       if(fileValue == fileType){
		       		addForm.form.submit({
						
						url : '<%=basePath%>FileResAction.do?method=create&fullFileName='+encodeURI(encodeURI(fileFullName)), 
	           			method : 'post', 
	           			waitMsg:'文件正在保存中...',      
	            		params : {useAjax:'yes',submit:submitBy,fileRes:fileFullName,enctype:'multipart/form-data'},    
						failure : function(form, action) {                      
							Ext.MessageBox.alert('提示信息', '保存失败,可能网络超时,请重新登录');
						},
						success : function(form, action) {
							Ext.MessageBox.alert('提示信息', '数据保存成功'); 
							addWin.hide();
							store.load({params:{start:0,limit:pageSize}});
					   },
					   scope:this
					})
					}else{
					Ext.MessageBox.alert('提示信息', '上传类型不符合文件类型');
					
					}
				};


}

   上面其实没这么复杂,我是复制过来的,大概意思就是创建一个form,form里有上传文件控件,注意设置 enctype:'multipart/form-data',   然后传送到后台action处理。

xxx-servlet.xml配置

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
		<property name="maxUploadSize"><value>30000000000</value></property>
</bean>

 action类代码:

	@RequestMapping(params = "method=create")
	public void create(FileResVO entiyVO,HttpServletRequest request, HttpServletResponse response) throws Exception {
		response.setContentType("text/html;charset=utf-8");
		
		String id = request.getParameter("code");
		String submitBy = request.getParameter("submit").trim();
		entiyVO.setSubmit_by(submitBy);
		MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;//将HttpServletRequest对象转换为MultipartHttpServletRequest对象
		  SimpleDateFormat dateformat = new SimpleDateFormat("yyyyMMdd");  
	        /**构建文件保存的目录**/  
		  String logoPathDir = "/resource/file/"+ dateformat.format(new Date());   
	        /**得到文件保存目录的真实路径**/  
	        String logoRealPathDir = request.getSession().getServletContext().getRealPath(logoPathDir);  
	        /**根据真实路径创建目录**/  
	        File logoSaveFile = new File(logoRealPathDir);  
	        if(!logoSaveFile.exists()) { 
	            logoSaveFile.mkdirs();  
	        }
	        /**页面控件的文件流**/  
	        MultipartFile multipartFile = multipartRequest.getFile("fileRes");   
	        
	        /**上传文件名称**/  
	        String logImageName = multipartFile.getOriginalFilename();// 
	       
	        
			/**获取文件的后缀**/  
	        String suffix = multipartFile.getOriginalFilename().substring(multipartFile.getOriginalFilename().lastIndexOf(".")+1);  
	        // 文件类型
	       
	        // 获取文件大小,以kB为单位
	        long size = multipartFile.getSize();
	        Double fSize =Math.round(size/1024.0*100)/100.0;
	        String fileSize = Double.toString(fSize)+"KB";
	        entiyVO.setFile_size(fileSize);
	        /**拼成完整的文件保存路径加文件**/  
	        String fileName = logoRealPathDir + File.separator   + logImageName;  
	        entiyVO.setUrl(fileName);
	        File file = new File(fileName);   
	        
	        try {  
	            multipartFile.transferTo(file);  //将文件写入到指定的目录
	        } catch (IllegalStateException e) {  
	            e.printStackTrace();  
	        } catch (IOException e) {         
	            e.printStackTrace();  
	        } 
		if(null == id || "".equals(id)){//提交文件
			 FileResService.createFileRes(entiyVO);
		}else{//修改文件
			 FileResService.updateFileRes(entiyVO);
		}
		

	}

 编译过程中可能会出现两种异常:nullpointerexception 和 类类型无法匹配(HttpServletRequest对象无法转换为multipartHttpServletRequest对象),若出现,分别是页面文件输入框name属性的值和action类接受参数名称一致,form表单的 enctype:'multipart/form-data'; 类类型无法匹配问题:设置表单 fileUpload: true,检查xml配置文件。

Spring Api 链接地址: http://static.springsource.org/spring/docs/2.0.x/api/overview-summary.html#overview_description

猜你喜欢

转载自houpengwdf.iteye.com/blog/1208239
今日推荐