<%@ Page Title="Percentage Text" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Percentage Text - AjaxUploader v5.2 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Percentage Text</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<div class="demo-card"> <div class="demo-card-header">Percentage Text Overlay</div> <div class="demo-card-body"> <p class="demo-description"> Display a percentage label on top of the progress bar to give users
 a clear numeric indication of upload completion.
 </p> <div class="demo-expect"><strong>What you should see:</strong> a numeric percentage readout alongside the bar, updated from the same progress events.</div> <style> #pctBar {
 width: 100%; height: 28px;
 background: #e5e7eb; border-radius: 0.5rem;
 position: relative; overflow: hidden;
 margin-top: 1rem; display: none;
 }
 #pctFill {
 height: 100%; width: 0%;
 background: #3b82f6; border-radius: 0.5rem;
 transition: width 0.2s ease;
 }
 #pctLabel {
 position: absolute; top: 0; left: 0; right: 0;
 text-align: center; line-height: 28px;
 font-size: 0.8rem; font-weight: 600; color: #1e293b;
 }
 </style> <div id="pctUploader"></div> <div id="pctBar"> <div id="pctFill"></div> <span id="pctLabel">0%</span> </div> <div class="code-panel"> <pre><code>&lt;div id="uploader"&gt;&lt;/div&gt;
&lt;div id="pctBar"&gt;
 &lt;div id="pctFill"&gt;&lt;/div&gt;
 &lt;span id="pctLabel"&gt;0%&lt;/span&gt;
&lt;/div&gt;

AjaxUploader.create(el, {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 onTaskProgress: function(task, pct) {
 var safePct = clampPercent(pct);
 fill.style.width = safePct + '%';
 label.textContent = safePct + '%';
 }
});</code></pre> </div> </div>
</div> 
</asp:Content> 
<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script> (function () {
 var bar = document.getElementById('pctBar');
 var fill = document.getElementById('pctFill');
 var label = document.getElementById('pctLabel');
 var host = document.getElementById('pctUploader');
 function clampPercent(value) {
 var pct = Number(value);
 if (!isFinite(pct)) return 0;
 return Math.max(0, Math.min(100, Math.round(pct)));
 }
 if (!host || !window.AjaxUploader || typeof AjaxUploader.create !== 'function') return;
 AjaxUploader.create(host, {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 multiple: true,
 autoUpload: true,
 onTaskStart: function () { if (bar) bar.style.display = 'block'; },
 onTaskProgress: function (task, pct) {
 var safePct = clampPercent(pct);
 if (fill) fill.style.width = safePct + '%';
 if (label) label.textContent = safePct + '%';
 },
 onTaskComplete: function () {
 if (fill) fill.style.width = '100%';
 if (label) label.textContent = '100%';
 }
 });
 })();
</script>
</asp:Content>
