Topbar
Topbar
Sign in
|
Join
|
Client Center
Home
Products
Client Center
Contact
Purchase
Support forums
»
Products
»
Ajax Uploader
»
Re: Progress bar in custom queue table.
Re: Progress bar in custom queue table.
11-16-2009, 9:42 PM
cutechat
Joined on 07-22-2004
Posts 2,332
Re: Progress bar in custom queue table.
Reply
Quote
Michael Raizman ,
Here is a sample :
<%@ Page Language="C#" Title="Customize the queue UI" %> <%@ Register TagPrefix="CuteWebUI" Namespace="CuteWebUI" Assembly="CuteWebUI.AjaxUploader" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> </head> <body> <form runat="server"> <div> <asp:LinkButton runat="server" ID="BrowseButton" Text="Select Files To Upload" /> </div> <div id="queuediv" style="display: none;"> <div id="queuedivtablecontainer"> </div> <div style="font-size:larger;padding-left:100px;margin:4px;"> <a href="#" onclick="cancelalltasks();return false;">Cancel all tasks.</a> </div> </div> <div> <CuteWebUI:UploadAttachments runat="server" ID="UploadAttachments1" InsertButtonID="BrowseButton"> </CuteWebUI:UploadAttachments> </div> </form> </body> <script> var uploadingcell=null; var lastprogress={}; function UpdateUploadingCellText() { if(!uploadingcell)return; uploadingcell.innerHTML="0%"; if(lastprogress.uploadedsize) { uploadingcell.innerHTML=Math.round(lastprogress.uploadedsize*100/lastprogress.totalsize)+"%"; } } var uploader=document.getElementById("<%=UploadAttachments1.ClientID %>"); uploader.handleprogress=function(arg1,filename,starttime,uploadedsize,totalsize) { lastprogress={}; lastprogress.filename=filename lastprogress.starttime=starttime; lastprogress.uploadedsize=uploadedsize; lastprogress.totalsize=totalsize; UpdateUploadingCellText(); } uploader.handlequeueui=function(list) { uploadingcell=null; if(list.length<2) { document.getElementById("queuediv").style.display="none"; } else { document.getElementById("queuediv").style.display=""; var container=document.getElementById("queuedivtablecontainer"); container.innerHTML=""; var table=document.createElement("table"); table.style.borderCollapse="collapse"; table.cellSpacing=0; table.cellPadding=4; table.border=1; table.borderColor="darkgreen"; for(var i=0;i<list.length;i++) { var name=list[i].FileName var size=list[i].FileSize // (or -1) var stat=list[i].Status // Finish|Error|Upload|Queue var func=list[i].Cancel; var row=table.insertRow(-1); row.insertCell(-1).innerHTML=name; var last=row.insertCell(-1); if(stat=="Queue") { var btn=document.createElement("A"); btn.href="BLOCKED SCRIPTvoid(0)"; btn.onclick=func; btn.innerHTML="Cancel"; last.appendChild(btn); } else if(stat=="Upload") //show the progress in this row { uploadingcell=last; UpdateUploadingCellText(); } else { last.innerHTML=stat; } } container.appendChild(table); } return false; //hide the default; } function cancelalltasks() { uploader.cancelall(); } </script> </html>
It show text progress info for the uploading item
Regards,
Terry
View Complete Thread