Dear srotkin,
Please refer to the following snippet:
<%@ Page Language="C#" Title="Total Progress" %>
<%@ Import Namespace="CuteWebUI" %>
<%@ 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">
<script runat="server">
void InsertMsg(string msg)
{
ListBoxEvents.Items.Insert(0, msg);
ListBoxEvents.SelectedIndex = 0;
}
protected void UploadAttachments1_AttachmentAdded(object sender, AttachmentItemEventArgs args)
{
InsertMsg("Added.." + args.Item.FileName);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<style>
.AjaxUploaderProgressTable
{
display: none;
}
.AjaxUploaderProgressBarText
{
display: none;
}
.AjaxUploaderProgressInfoText
{
display: none;
}
</style>
</head>
<body>
<form id="Form1" runat="server">
<CuteWebUI:UploadAttachments runat="server" ID="UploadAttachments1" OnAttachmentAdded="UploadAttachments1_AttachmentAdded">
</CuteWebUI:UploadAttachments>
<div id='progressInfo' style="display: none; font-size: 18px; color: DarkRed">
</div>
<br />
<div>
Server Trace:
<br />
<asp:ListBox runat="server" ID="ListBoxEvents" Width="800"></asp:ListBox>
</div>
</form>
<script type="text/javascript">
function ToFixed(num) {
if (num > 100)
return Math.round(num);
if (num > 10)
return num.toFixed(1);
return num.toFixed(2);
}
function FormatSize(bytecount) {
var str = bytecount + ' B';
if (Number(bytecount) >= 2048) { str = ToFixed(bytecount / 1024) + ' KB'; }
if (Number(bytecount) >= 2097152) { str = ToFixed(bytecount / 1048576) + ' MB'; }
if (Number(bytecount) >= 2147483648) { str = ToFixed(bytecount / 1073741824) + ' GB'; }
return str;
}
var progressInfo = document.getElementById("progressInfo");
var hasStarted = false;
var startTime = 0;
var fullSize = 0;
var finishSize = 0;
var queueSize = 0;
var filecount = 0;
function CuteWebUI_AjaxUploader_OnStart() {
if (hasStarted) return;
hasStarted = true;
startTime = new Date().getTime();
progressInfo.innerHTML = "Start upload";
progressInfo.style.display = "";
}
function CuteWebUI_AjaxUploader_OnStop() {
hasStarted = false;
progressInfo.style.display = "none";
}
function CuteWebUI_AjaxUploader_OnPostback() {
hasStarted = false;
progressInfo.style.display = "none";
}
//validate the total selected size
function CuteWebUI_AjaxUploader_OnSelect(files) {
var selectedSize = 0;
for (var i = 0; i < files.length; i++) {
selectedSize += files[i].FileSize;
}
//if selected files size is greater than this value, will stop the upload
if (selectedSize > 1024 * 1024 * 1024) {
alert("the selected file size is " + FormatSize(selectedSize) + ",you only can upload 1G files");
return false;
}
}
function CuteWebUI_AjaxUploader_OnQueueUI(list) {
filecount = list.length;
fullSize = 0;
finishSize = 0;
queueSize = 0;
for (var i = 0; i < list.length; i++) {
var size = list[i].FileSize; //or -1 if iframe mode
var stat = list[i].Status;
fullSize += size;
if (stat == "Finish")
finishSize += size;
if (stat == "Queue")
queueSize += size;
}
return true;
}
//this is total progress bar
function CuteWebUI_AjaxUploader_OnProgress(enable, filename, begintime, uploadedsize, totalsize) {
if (fullSize < 0) {
progressInfo.innerHTML = "Unable to calculate total progress for iframe mode";
return true;
}
if (!enable)
return;
if (!totalsize)
return;
var size1 = finishSize + uploadedsize;
var size2 = queueSize + totalsize - uploadedsize;
var size3 = size1 + size2;
var seconds = (new Date().getTime() - startTime) / 1000;
var speed = size1 / seconds;
var timeleft = size2 / speed;
progressInfo.innerHTML = "Uploading " + filecount + " files. " + FormatSize(size1) + " of " + FormatSize(size3) + " at " + FormatSize(Math.round(speed)) + "/s; " + Math.round(timeleft)/60 + " mins remaining ";
//return false;
}
</script>
</body>
</html>