What we have here is a way to communicate to the progress bar, so we can use it on server code.
I assume that the data will come from a server or xml file or anything but for the shake of this example i do a manual add. You will have to modify it as when to start the time, etc but this is the basics.
Note that ( i haven't searched) if we are able to get an image download-upload progress from server side then we can modify this to an image download-uploader.
We create a vb webpage with a web method and a class to use the web method:
Code:
Imports System.Web.Script.Serialization
Imports System.Web.Script.Services
Public Class WebForm1
Inherits System.Web.UI.Page
<System.Web.Services.WebMethod(BufferResponse:=False)> _
<ScriptMethod(ResponseFormat:=ResponseFormat.Json)> _
Public Shared Function Gettime(strtimeval As String) As List(Of timeclock)
'implementation code
Dim myclock As New List(Of timeclock)()
' Call the sql,xml and retrieve next value, etc...
'For this example i do it manually
Dim i As Integer = CInt(strtimeval)
'Lame check here.I assume values of 10 in every call
If i = 100 Then i = 0 'loop time
i = i + 10
'index not actually needed here
myclock.Add(New timeclock("0", i.ToString))
Dim lstItems As List(Of timeclock) = New JavaScriptSerializer().ConvertToType(Of List(Of timeclock))(myclock)
Return lstItems
End Function
End Class
Public Class timeclock
Private index As String
Public timerval As String
Public Sub New(index As String, timerval As String)
Me.index = index
Me.timerval = timerval
End Sub
End Class
Now we call this web method and feed the progress bar(must import Jquery):
Code:
<script type="text/javascript">
var myVar = setInterval(function () { myTimer() }, 2000);
function myTimer() {
$.ajax({
type: "POST",
url: "WebForm1.aspx/Gettime",
data: "{strtimeval:'" + document.getElementById('pb1').value + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
try {
var oRetVal = response.d;
$.each(oRetVal, function (index, timerval) {
document.getElementById('pb1').value = timerval.timerval;
}
);
}
catch (ex) {
alert(ex.message);
}
},
failure: function (msg) {
alert(msg);
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<br />
<p id="demo"></p>
<br />
<progress max="100" value="0" id="pb1"></progress>
</div>
</form>
</body>
Edit: Will only work on Html5 browsers (iexplorer 9 and below is, as usual, not working (will give you an undefined progress bar).