手工写的上传文档进度条

cjmiou

JavaBean（用于DWR与前台传值）
public class UploadInfo {private List<Long> hasUpload = new ArrayList<Long>();private List<Long> totalSize = new ArrayList<Long>();getter and setter....}处理上传的Action
@Overridepublic 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 +="   "            numDiv.id = "num"+i;            numDiv.innerHTML = i+1+":   ";            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 = "  "+"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>