You can hide the default progress bar and then create one customized progress bar at the bottom of the page. You can check the following code and customize based on this example:
<%@ Language="VBScript" %>
<!-- #include file="aspuploader/include_aspuploader.asp" -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple File Upload - use SaveDirectory property</title>
<link href="demo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="demo">
<h2>Simple File Upload with Custom Validation</h2>
<p>A basic sample demonstrates the use of the Upload control. The user is allowed to select multiple files and upload them to a specified location (savefiles) directly. It also demonstrates Client side validation of file size/types prior to uploading the files to a server.</p>
<ul>
<li>Allowed file types is set to: jpg, gif, png, zip</li>
</ul>
<%
Dim uploader
Set uploader=new AspUploader
uploader.MultipleFilesUpload=true
uploader.InsertText="Select multiple files (Max 10M)"
%>
<%=uploader.GetString() %>
</div>
<div id='progressInfo' style="display:none;font-size:18px;color:DarkRed"></div>
<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";
}
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;
}
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) + " seconds remaining ";
//return false, it will hide the default progress bar
return false;
}
</script>
</body>
</html>
Thanks for asking