posted 15 years ago
Hi Venkat,
You can use javascript to achieve this
Adding Progress Bar Element
------------------------------
A custom progress bar may be implemented in several ways. For example, you can use a standard ActiveX component Progress Bar, or use the IMG element (or some other element) changing its width. Let's use the DIV element and change its width via styles:
<span id="ProgressBarText" style="display:none;"></span>
<br />
<div id="ProgressBar" style="width:0px;height:20px;background-color:blue;display:none;"></div>
Changing Progress Bar Position on Progress Status Change
---------------------------------------------------------
<script type="text/javascript">
function ImageUploader_Progress(Status, Progress, ValueMax, Value, StatusText) {
//Max width of progress bar
var progresBarWidth = 200;
var progresBar = document.getElementById("ProgressBar");
var progresBarText = document.getElementById("ProgressBarText");
switch(Status)
{
case "START":
//Show progress bar
progresBar.style.display = "block";
progresBarText.style.display = "block";
//Set width of progress bar to 0px
progresBar.style.width = "0px";
break;
case "PREPARE":
//Show preparing progress
progresBarText.innerText = Status + " " + Math.round(Value/ValueMax*100) + "%";
//Set width of progress bar
progresBar.style.width = Math.round(Value/ValueMax*progresBarWidth) + "px";
break;
case "UPLOAD":
//Show uploading progress
progresBarText.innerText = Status + " " + Math.round(Value/ValueMax*100) + "%";
//Set width of progress bar
progresBar.style.width = Math.round(Value/ValueMax*progresBarWidth) + "px";
break;
case "COMPLETE":
//Hide progress bar
progresBar.style.display = "none";
progresBarText.style.display = "none";
//Show custom message
alert("All images were successfully uploaded.");
//Redirect to galery.asp page when upload process is completed
//window.location.replace('gallery.asp');
break;
case "CANCEL":
//Hide progress bar
progresBar.style.display = "none";
progresBarText.style.display = "none";
//Show custom message
alert("Uploading were canceled.");
break;
case "ERROR":
//Hide progress bar
progresBar.style.display = "none";
progresBarText.style.display = "none";
//Show custom message
alert("Error arrised during uploading.");
break;
}
}
</script>
Concurrent Upload
---------------------
In case of a concurrent upload, the example above will not work as ValueMax and Value arguments contain different values for different connections. Instead, you may use the Progress argument that contains a value reflecting the whole process completion in percentage terms. A modified version of the ImageUploader_Progress handler may look like the following:
<script type="text/javascript">
function ImageUploader_Progress(Status, Progress, ValueMax, Value, StatusText) {
//Max width of progress bar
var progresBarWidth = 200;
var progresBar = document.getElementById("ProgressBar");
var progresBarText = document.getElementById("ProgressBarText");
switch(Status)
{
case "START":
//Show progress bar
progresBar.style.display = "block";
progresBarText.style.display = "block";
//Set width of progress bar to 0px
progresBar.style.width = "0px";
break;
case "PREPARE":
//Show preparing progress
progresBarText.innerText = Status + " " + Progress + "%";
//Set width of progress bar
progresBar.style.width = Progress + "px";
break;
case "UPLOAD":
//Show uploading progress
progresBarText.innerText = Status + " " + Progress + "%";
//Set width of progress bar
progresBar.style.width = Progress + "px";
break;
case "COMPLETE":
//Hide progress bar
progresBar.style.display = "none";
progresBarText.style.display = "none";
//Show custom message
alert("All images were successfully uploaded.");
break;
case "CANCEL":
//Hide progress bar
progresBar.style.display = "none";
progresBarText.style.display = "none";
//Show custom message
alert("Uploading were canceled.");
break;
case "ERROR":
//Hide progress bar
progresBar.style.display = "none";
progresBarText.style.display = "none";
//Show custom message
alert("Error arrised during uploading.");
break;
}
}
</script>
You Want it.. Get it.......the Right Way...<br /> <br />SCJP 5.0 SCWCD 5.0