手工写的上传文档进度条
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;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.type; if( type=="button" || type=="submit" || type=="reset"){ inputs.disabled = true; } if(type=="file"){ inputs.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.type == "file"){ var fileName = inputs.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; 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/data.totalSize*100; if(isNaN(process)){ if(data.hasUpload>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+"<br>totalSize="+data.totalSize+"<br>Process="+process; } window.setTimeout("startProcess()",200); }</script>
页:
[1]