|
|
-
TotalProgressBar:
- TotalProgress:
- TotalProgressPercent:
- FilesCount:
- FilesCountPercent:
- RequestSize:
- SelectedFilesCount:
- CurrentFileName:
- TimeElapsed:
- TimeEstimated:
- TransferSpeed:
Note: Because of the specifics of the Internet forms, chosen files will be
uploaded on each postback (e.g. each press of a button)
Note: The largest allowed combined file size for upload in this example is
100MB. This is specified by the maxRequestLength="102400" set in Web.config file.
If you attempt to upload files with total size greater that 100MB you will get "Page
Not Found" error. For more information about uploading large files visit the help
article
Uploading Large Files
Show code in new window
Demo isolation steps
<%@ page language="c#" codefile="DefaultCS.aspx.cs" autoeventwireup="true" inherits="Telerik.Web.Examples.Upload.ProgressTemplate.DefaultCS" %>
<%@ register tagprefix="telerik" namespace="Telerik.Web.UI" assembly="Telerik.Web.UI" %>
<%@ register tagprefix="qsf" namespace="Telerik.QuickStart" %>
<%@ register tagprefix="qsf" tagname="Header" src="~/Common/Header.ascx" %>
<%@ register tagprefix="qsf" tagname="HeadTag" src="~/Common/HeadTag.ascx" %>
<%@ register tagprefix="qsf" tagname="Footer" src="~/Common/Footer.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<qsf:HeadTag runat="server" />
<style type="text/css">
input.RadUploadSubmit { margin-top: 20px; }
</style>
</head>
<body class="BODY">
<form runat="server" id="mainForm" method="post">
<script type="text/javascript">
//<![CDATA[
function onClientProgressBarUpdating(progressArea, args)
{
progressArea.updateVerticalProgressBar(args.get_progressBarElement(), args.get_progressValue());
args.set_cancel(true);
}
//]]>
</script>
<telerik:RadScriptManager id="ScriptManager1" runat="server" />
<qsf:Header runat="server" navigationlanguage="C#" />
<table width="754">
<tr>
<td colspan="2">
To see the progress area, please upload a large file.
</td>
</tr>
<tr>
<td style="vertical-align: top;">
<telerik:radupload id="Radupload1" runat="server" initialfileinputscount="2" />
<asp:button id="buttonSubmit" runat="server" text="Submit" onclick="buttonSubmit_Click"
cssclass="RadUploadSubmit" />
</td>
<td style="vertical-align: top;">
<div class="smallModule">
<div class="rc1"><div class="rc2"><div class="rc3" style="width:240px">
<asp:Label id="labelNoResults" runat="server" visible="True">No uploaded files yet</asp:Label>
<asp:Repeater id="reportResults" runat="server" visible="False">
<HeaderTemplate>
<span>Uploaded files:</span><br />
</HeaderTemplate>
<ItemTemplate>
'<%#DataBinder.Eval(Container.DataItem, "FileName")%>' (<%#DataBinder.Eval(Container.DataItem, "ContentLength").ToString() + " bytes"%>)<br />
</ItemTemplate>
</asp:Repeater>
</div></div></div>
</div>
</td>
</tr>
</table>
<telerik:RadProgressManager id="Radprogressmanager1" runat="server" />
<telerik:RadProgressArea id="RadProgressArea1" runat="server" CssClass="module" onclientprogressbarupdating="onClientProgressBarUpdating">
<ProgressTemplate>
<ul class="ruProgress">
<li>
<h6>TotalProgressBar:</h6>
<div class="customProgressBar" style="position: relative; height: 168px; width: 168px;">
<div id="PrimaryProgressBarInnerDiv" runat="server" style="background-color: Blue;
height: 0%; width: 168px; vertical-align: bottom; position: absolute; top: 0;
left: 0; z-index: 900;">
<!-- / -->
</div>
<div style="position: absolute; z-index: 1000; top: 0; left: 0;">
<object type="application/x-shockwave-flash" data="speedometer.swf" height="168" width="168"><param name="speedometer" value="speedometer.swf"/></object>
</div>
</div>
</li>
<li><strong>TotalProgress:</strong> <span runat="server" id="PrimaryValue"></span></li>
<li><strong>TotalProgressPercent:</strong> <span runat="server" id="PrimaryPercent"></span></li>
<li><strong>FilesCount:</strong> <span runat="server" id="SecondaryValue"></span></li>
<li><strong>FilesCountPercent:</strong> <span runat="server" id="SecondaryPercent"></span></li>
<li><strong>RequestSize:</strong> <span runat="server" id="PrimaryTotal"></span></li>
<li><strong>SelectedFilesCount:</strong> <span runat="server" id="SecondaryTotal"></span></li>
<li><strong>CurrentFileName:</strong> <span runat="server" id="CurrentOperation"></span></li>
<li><strong>TimeElapsed:</strong> <span runat="server" id="TimeElapsed"></span></li>
<li><strong>TimeEstimated:</strong> <span runat="server" id="TimeEstimated"></span></li>
<li><strong>TransferSpeed:</strong> <span runat="server" id="Speed"></span></li>
</ul>
</ProgressTemplate>
</telerik:RadProgressArea>
<qsf:Footer runat="server" />
</form>
</body>
</html>
|