利用jsp+Extjs實(shí)現(xiàn)動(dòng)態(tài)顯示文件上傳進(jìn)度

%@ page language="java" import="java.util.*, java.io.*, org.apache.commons.fileupload.*, org.apache.commons.fileupload.disk.DiskFileItemFactory, org.apache.commons.fileupload.servlet.ServletFileUpload" pageEncoding="utf-8"%>
%
//注意上面的import的jar包是必須的
//下面是使用apache commons fileupload接收上傳文件；
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
//因?yàn)閮?nèi)部類無法引用request，所以要實(shí)現(xiàn)一個(gè)。
class MyProgressListener implements ProgressListener{
	private HttpServletRequest request = null;
	MyProgressListener(HttpServletRequest request){
		this.request = request;
	}
	public void update(long pBytesRead, long pContentLength, int pItems) {
		double percentage = ((double)pBytesRead/(double)pContentLength);
		//上傳的進(jìn)度保存到session，以便processController.jsp使用
		request.getSession().setAttribute("uploadPercentage", percentage);
	}
}
upload.setProgressListener(new MyProgressListener(request));
List items = upload.parseRequest(request);
Iterator iter = items.iterator();
while (iter.hasNext()) {
  FileItem item = (FileItem) iter.next();
  if (item.isFormField()){
  	
  } else {
    //String fieldName = item.getFieldName();
    String fileName = item.getName();
    //String contentType = item.getContentType();
    System.out.println();
    boolean isInMemory = item.isInMemory();
    long sizeInBytes = item.getSize();
    File uploadedFile = new File("c://" + System.currentTimeMillis() + fileName.substring(fileName.lastIndexOf(".")));
    item.write(uploadedFile);
  }
}
out.write("{success:true,msg:'保存上傳文件數(shù)據(jù)并分析Excel成功!'}");
out.flush();
%>

%@ page language="java" import="java.util.*" contentType = "text/html;charset=UTF-8" pageEncoding="utf-8"%>
%
	//注意上面的抬頭是必須的。否則會(huì)有ajax亂碼問題。
	//從session取出uploadPercentage并送回瀏覽器
	Object percent = request.getSession().getAttribute("uploadPercentage");
	String msg = "";
	double d = 0;
	if(percent==null){
		d = 0;
	}
	else{
		d = (Double)percent;
		//System.out.println("+++++++processController: " + d);
	}
	if(d1){
	//d1代表正在上傳，
		msg = "正在上傳文件...";
		out.write("{success:true, msg: '"+msg+"', percentage:'" + d + "', finished: false}");
	}
	else if(d>=1){
		//d>1 代表上傳已經(jīng)結(jié)束，開始處理分析excel，
		//本例只是模擬處理excel，在session中放置一個(gè)processExcelPercentage，代表分析excel的進(jìn)度。
		msg = "正在分析處理Excel...";
		String finished = "false";
		double processExcelPercentage = 0.0;
		Object o = request.getSession().getAttribute("processExcelPercentage");
		if(o==null){
			processExcelPercentage = 0.0;
			request.getSession().setAttribute("processExcelPercentage", 0.0);
			
		}
		else{
			//模擬處理excel,百分比每次遞增0.1 
			processExcelPercentage = (Double)o + 0.1;
			request.getSession().setAttribute("processExcelPercentage", processExcelPercentage);
			if(processExcelPercentage>=1){
				//當(dāng)processExcelPercentage>1代表excel分析完畢。
				request.getSession().removeAttribute("uploadPercentage");
				request.getSession().removeAttribute("processExcelPercentage");
				//客戶端判斷是否結(jié)束的標(biāo)志
				finished = "true";
			}
		}
		out.write("{success:true, msg: '"+msg+"', percentage:'" + processExcelPercentage + "', finished: "+ finished +"}");
		//注意返回的數(shù)據(jù)，success代表狀態(tài)
		//percentage是百分比
		//finished代表整個(gè)過程是否結(jié)束。
	}
	out.flush();
%>

html>
	head>
		meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		title>File Upload Field Example/title>
		link rel="stylesheet" type="text/css"
			href="ext/resources/css/ext-all.css" />
		script type="text/javascript" src="ext/adapter/ext/ext-base.js"> /script>
		script type="text/javascript" src="ext/ext-all.js"> /script>
		style>
/style>
	/head>
	body>
		a >sunxing007/a>
		div id="form">/div>
	/body>
	script>
var fm = new Ext.FormPanel({
	title: '上傳excel文件',
	url:'uploadController.jsp?t=' + new Date(),
	autoScroll:true,
	applyTo: 'form',
	height: 120,
	width: 500,
	frame:false,
	fileUpload: true,
	defaultType:'textfield',
	labelWidth:200,
	items:[{
		xtype:'field',
		fieldLabel:'請(qǐng)選擇要上傳的Excel文件 ',
		allowBlank:false,
		inputType:'file',
		name:'file'
	}],
	buttons: [{
		text: '開始上傳',
		handler: function(){
			//點(diǎn)擊'開始上傳'之后，將由這個(gè)function來處理。
		  if(fm.form.isValid()){//驗(yàn)證form， 本例略掉了
		  //顯示進(jìn)度條
				Ext.MessageBox.show({ 
				  title: '正在上傳文件', 
				  //msg: 'Processing...', 
				  width:240, 
				  progress:true, 
				  closable:false, 
				  buttons:{cancel:'Cancel'} 
				}); 
				//form提交
    fm.getForm().submit();
    //設(shè)置一個(gè)定時(shí)器，每500毫秒向processController發(fā)送一次ajax請(qǐng)求
		  var i = 0;
		  var timer = setInterval(function(){
		  		//請(qǐng)求事例
			   Ext.Ajax.request({
			   //下面的url的寫法很關(guān)鍵，我為了這個(gè)調(diào)試了好半天
			   //以后凡是在ajax的請(qǐng)求的url上面都要帶上日期戳，
			   //否則極有可能每次出現(xiàn)的數(shù)據(jù)都是一樣的，
			   //這和瀏覽器緩存有關(guān)
						url: 'processController.jsp?t=' + new Date(),
						method: 'get',
						//處理ajax的返回?cái)?shù)據(jù)
						success: function(response, options){
							status = response.responseText + " " + i++;
							var obj = Ext.util.JSON.decode(response.responseText);
							if(obj.success!=false){
								if(obj.finished){
									clearInterval(timer);	
									//status = response.responseText;
									Ext.MessageBox.updateProgress(1, 'finished', 'finished');
									Ext.MessageBox.hide();
								}
								else{
									Ext.MessageBox.updateProgress(obj.percentage, obj.msg);	
								}
							}
						},
						failure: function(){
							clearInterval(timer);
							Ext.Msg.alert('錯(cuò)誤', '發(fā)生錯(cuò)誤了。');
						} 
					});
		  }, 500);
		    
		  }
		  else{
		  	Ext.Msg.alert("消息","請(qǐng)先選擇Excel文件再上傳.");
		  }
		} 
	}]
});
/script>
/html>