手工写的上传文档进度条

JavaBean（用于DWR与前台传值）

public class UploadInfo {
	private List<Long> hasUpload = new ArrayList<Long>();
	private List<Long> totalSize = new ArrayList<Long>();

	getter and setter....
}

处理上传的Action

	@Override
	public String execute() throws Exception {
		DocumentCatalog catalog = catalogServie.getDocumentCatalog(catalogId);
		List<DocumentItem> list = new ArrayList<DocumentItem>();
		DocumentItem item = null;
		Date date = new Date();
		String type;
		String fileName;
		File f = null;
//		long totalSize = 0;
//		for(File ss : file){
//			totalSize += ss.length();
//		}
		//设置进度条所需要的信息
		//这个对象不可以在循环中声明，要不每一次取得到值都是为空
		UploadInfo uploadInfo = new UploadInfo();
		for (int i = 0; i < file.size(); ++i) {
			item = new DocumentItem();
			fileName = fileFileName.get(i);
			f = file.get(i);
			item.setCatalog(catalog);
			item.setCreateDate(date);
			item.setRealSize(f.length());
			item.setName(fileName);
			type = FileUtils.getFileExtName(fileName, false);
			item.setType(type);
			item.setSize(FileUtils.getStringSize(f.length()));
			item.setRandomName(FileUtils.getRandomFileName(5)+"."+type);
			
			String separator = File.separator;
			// 文档的路径
			String itemStorage = FileStorage.getDocumentItemStoragepath(ServletActionContext.getRequest());
			// 创建上传文件
			File upload = new File(itemStorage + separator + catalogId + separator + item.getRandomName());
			// 如果目录不存在，强制创建该目录，而在JAVA中目录和文件是一样的，所以创建上一层的目录就可以了
			org.apache.commons.io.FileUtils.forceMkdir(upload.getParentFile());
			//uploadInfo.setTotalSize(totalSize);
			uploadInfo.getTotalSize().add(f.length());
			//先存一个值，要不下面写hasUpload的时候会出错！
			uploadInfo.getHasUpload().add(0L);
			
			ServletActionContext.getRequest().getSession().setAttribute("uploadInfo", uploadInfo);

			InputStream is = new FileInputStream(f);
			byte[] buffer = new byte[1024];
			int len = 0;
			OutputStream os = new FileOutputStream(upload);
			while (-1 != (len = is.read(buffer))) {
				//Thread.sleep(10);
				os.write(buffer, 0, len);
				//设置已读的值
				uploadInfo.getHasUpload().set(i, uploadInfo.getHasUpload().get(i)+len);
			}
			is.close();
			os.close();
			// 保存文档
			list.add(item);
		}
		ServletActionContext.getRequest().getSession().removeAttribute("uploadInfo");
		this.service.addDocumentItems(catalog, list);
		return SUCCESS;
	}

 JSP代码

<tr>
	<td colspan="2">
		<div id="bar" style="display:none;">
		</div>
	</td>
</tr>

 JS代码：

<script type="text/javascript">
    var count=0;     //动态添加的文档计数器
    var num=1;
    var maxUploadFileCount = 4;    //动态可添加要上传的文档数量
    function addMore(){
        if(count == maxUploadFileCount){
            alert("一次上传不能超过"+(maxUploadFileCount+1)+"个文档");
            return ;
        }
        var theTd = document.getElementById("td");
        var br = document.createElement("br");
        var obj = document.createElement("input");
        var button = document.createElement("input");

        obj.type = "file";
        obj.name = "file";
        obj.id = "file"+ ++num;
        obj.size = 40;

        button.type = "button";
        button.value = "删除文件";
        button.onclick = function(){
            theTd.removeChild(button);
            theTd.removeChild(obj);
            theTd.removeChild(br);
            --count;
        };

        theTd.appendChild(br);
        theTd.appendChild(obj);
        theTd.appendChild(button);
        ++count;
    }

    function validate(){
        var theTr = document.getElementById("tr");
        var firstFile = document.getElementById("file") ;
        if(firstFile!=null && firstFile.value.length==0){
           alert("不能有留空的上传选项！");
           return false;
        }
        
        for(var i=0;i<num;++i){
            var file = document.getElementById("file"+num);
            if(file!=null && file.value.length==0){
               alert("不能有留空的上传选项！");
               return false;
            }
        }
         var inputs = document.getElementsByTagName("input");
        for(var i=0;i<inputs.length;++i){
            var type = inputs[i].type;
            if( type=="button" || type=="submit" || type=="reset"){
                inputs[i].disabled = true;
            }
            if(type=="file"){
                inputs[i].readOnly=true;
            }
        }
    	startUpload();
        
        return true;
    }

    function startUpload(){

        var outerDiv = document.getElementById("bar");
        var fileArray = new Array();
        var inputs = document.getElementsByTagName("input");
        for(var i=0;i<inputs.length;++i){
           if(inputs[i].type == "file"){
               var fileName = inputs[i].value;
               var index = fileName.indexOf("\\");
               if(-1 == index){
                   index = fileName.indexOf("/");  
               }
               fileName = fileName.substring(index+1,fileName.length);
               fileArray.push(fileName);
           }
        }


        for(var i=0;i<count+1;++i){
            var numDiv = document.createElement("div");
            var fileName = fileArray[i];
            if(fileName.length>35){
                fileName = fileName.substring(0,35)+"...";
            }
            fileName +="&nbsp;&nbsp;&nbsp;"


            numDiv.id = "num"+i;
            numDiv.innerHTML = i+1+":&nbsp;&nbsp;&nbsp;";
            numDiv.style.cssFloat = "left"; //针对FF
            numDiv.style.styleFloat = "left"; //针对IE

            var nameDiv = document.createElement("div");
            nameDiv.id = "name"+i+1;
            nameDiv.style.cssFloat = "left"; //针对FF
            nameDiv.style.styleFloat = "left"; //针对IE
            nameDiv.style.width="320px";
            nameDiv.innerHTML = fileName;

//            <div id="bar" style="width: 300px; height: 20px; border: 1px; background: #eee; float: left;">
//                <div id="processBar" style="width: 0px; height: 20px; background: green;"></div>
//            </div>
            var innerDiv = document.createElement("div");
            innerDiv.style.width = "300px";
            innerDiv.style.height = "20px";
            innerDiv.style.border = "1px";
            innerDiv.style.background = "#eee";
            innerDiv.style.cssFloat = "left"; //针对FF
            innerDiv.style.styleFloat = "left"; //针对IE

            var processBarDiv = document.createElement("div");
            processBarDiv.id = "processBar"+i;
            processBarDiv.style.width = "0px";
            processBarDiv.style.height = "20px";
            processBarDiv.style.background = "green";
//            processBarDiv.style.cssFloat = "left"; //针对FF
//            processBarDiv.style.styleFloat = "left"; //针对IE

            var rateDiv = document.createElement("div");
            rateDiv.id = "rateDiv"+i;
            rateDiv.innerHTML = "&nbsp;&nbsp;"+"0%";

            outerDiv.appendChild(numDiv);
            outerDiv.appendChild(nameDiv);

            innerDiv.appendChild(processBarDiv);

            outerDiv.appendChild(innerDiv);
            outerDiv.appendChild(rateDiv);
        }
        window.setTimeout("startProcess()",200);
    }

    function startProcess(){
        uploadInfoListener.getUploadInfo(showProcessBar);
    }

    function showProcessBar(data){
        var process = 0;
        var barBox = document.getElementById("bar");
        barBox.style.display = "block";
        var test = document.getElementById("test");
        for(var i=0;i<count+1;++i){
            process=data.hasUpload[i]/data.totalSize[i]*100;
            if(isNaN(process)){
                if(data.hasUpload[i]>0){
					process=100;
                }else{
                	process=0;
                }
            }
            var processRate = document.getElementById("rateDiv"+i);
            processRate.innerHTML = Math.floor(process)+"%";
            var processBar = document.getElementById("processBar"+i);
            processBar.style.width= process*3+"px";
            test.innerHTML="hasUpload="+data.hasUpload[i]+"<br>totalSize="+data.totalSize[i]+"<br>Process="+process;
        }
        window.setTimeout("startProcess()",200);
    }
</script>