日期:2014-05-16  浏览次数:20409 次

java/extjs上传文件,显示真实进度条

当前idle状态!捣腾了一个文件上传功能,小温故了一把java/servlet上传的原理。
上传代码未用struts2,读取进度时才用了一下,本身struts2也把下面2个开源包'集成'进去了!代码都是在网上cp的,自己拼凑,加了一些注释。

当然,如果页面上没有Form表单(甚至是也未用struts2框架),就无法以表单(mutilpart/form-data格式)提交到后台,这时候可以借用第三方控件,如:flash插件或 (c++ ocx)控件等,辅助模仿form表单提交到jsp页面,再用jsp接收输入流,达到上传文件的目的!

如若想详细了解servlet上传,请参见这位大神的文章:http://www.ibm.com/developerworks/cn/java/fileup/

用struts2框架上传的文章:http://blog.csdn.net/lenotang/article/details/2784843

?

需要的jar:commons-fileupload-x.x.x.jar 和 commons-io-x.x.x.jar

?

首先是前端页面代码,(extjs3.3.1)

?

var m =0 ;		
var _interval;
 Ext.onReady(function() {
			var formPanel = new Ext.form.FormPanel({  
    			labelWidth:80,
				id:'formPanel', 
			    bodyStyle:'padding:5 0 0 0 ',  
			    height:515,  
			    width:200,  
			    frame:true,  
			    fileUpload:true,  
			    items:[new Ext.form.TextField({     
					    id:'excelUpload',   
					    anchor:'90%',     
					    height:30,  
					    width:350,    
					    name:'file',  
					    inputType:'file',  
					    fieldLabel:'文件选择'  
					})
				]  
			});  
			
			var upLoadFile = new Ext.Toolbar.Button({  
			    text:'上传',
			    listeners:{
			    	'click': uploadFiles
			    }
			}); 
			
			new Ext.Window({  
				    title:'上传文件',  
				    width:400,  
				    height:140,
				    minWidth:400,  
				    id:'uploadWin',
				    minHeight:140,  
				    layout:'fit',  
				    plain:true,  
				    bodyStyle:'padding:5px;',  
				    buttonAlign:'center',  
				    items:formPanel,  
				    buttons:[upLoadFile]
			    }).show(); 
			});
	function uploadFiles(t){
		var excelName = Ext.getCmp('excelUpload').getRawValue();// 上传文件名称的路径  
	    if (excelName == ""){  
	        Ext.Msg.alert("提示","请选择需要上传的文件!");  
	        return;  
	    }else {  
		        var array = new Array();  
		        array = excelName.split("\\");  
		        var length = array.length;  
		        var fileName = "";  
		        var index = 0;  
		        for (index = 0; index < length; index++) {  
		            if (fileName == "") {  
		                fileName = array[index];  
		            } else {  
		                fileName = fileName + "/" + array[index];  
		            }  
		        }  
		        _interval = setInterval("showRequest()", 100);
		        Ext.getCmp("formPanel").getForm().submit({  
		            url:'servlet/fileUpload',  
		            method:'POST',  
		            success:function(form, action, o) {  
		                Ext.MessageBox.alert("提示信息",action.result.message);  
		                	Ext.getCmp("uploadWin").setTitle("上传文件");
		            },  
		            failure : function(form, action) {  
		                Ext.MessageBox.alert("提示信息","请求失败,文件上传失败");  
		            }  
		        });  
		    }  
	}	
	function showRequest(){
		Ext.Ajax.request( {  
	        url : 'loginAction/getUploadPrcent.action',  
	        method : 'post',  
	       success: function(data, options){
	            	  Ext.getCmp("uploadWin").setTitle("上传文件:已经写入("+data.responseText+")");
	            	  if(data.responseText =='100%'){
	            	  	clearInterval(_interval);
	            	  	Ext.getCmp("uploadWin").setTitle("上传文件:写入完成,请稍等...");
	            	  	return;
	            	  }
	            	  m++ ;
	        } 
    });  
	
	}

? ?再贴监听方法:

?

??

public class UploadProgressListener implements Progr