[ FileUpload ] Notificare una operazione in corso

La fase di upload di un file di grandi dimensioni tramite un controllo FileUpload può richiedere anche diverso tempo, in special modo per utenti che non possono usufruire di una connessione a banda larga, può quindi essere utile notificare all’ utente che l’ operazione è in corso e non è necessario cliccare ripetutamente il pulsante di submit, ma solamente avere pazienza. A tale scopo può essere utilizzato un mix di semplice markup e qualche riga di javascript per stendere un velo opaco sulla schermata con un effetto molto elegante e professionale…

<form id=”form1″ runat=”server”> <div id=”parentDiv” class=”transparent” style=”position:absolute; background-color:Gray; width:100%; height:100%; display:none; top:0px; left:0px; z-index:5000;”></div><div id=”waitIndicatorDiv” class=”Indicator” runat=”server”>Please wait while the file is being uploaded..</div>

<div style=”position:absolute; top:100px; left:400px”>

<h2>File Upload Notifica operazione in corso</h2>

Select a file: <asp:FileUpload ID=”fu1″ runat=”server” />

<asp:Button ID=”btn_Upload” Text = “Upload” OnClick=”BtnUpload_Click” runat=”server” />

</div>

</form>

</body>

</html>

<script language=”javascript” type=”text/javascript”>

function FreezePage()

{

document.getElementById(“parentDiv”).style.display = ‘inline’;

ShowIndicator();

}

function ShowIndicator()

{

document.getElementById(“waitIndicatorDiv”).style.display = ‘block’;

}

</script>

… e qualche regola css:

.transparent
{
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
}

.Indicator
{
font-family:Verdana;
font-size:25px;
background: Green url(images/indicator_medium.gif) no-repeat right;
position:absolute;
top:300px;
left:500px;
display:none;
width: 591px;
z-index:99999;
}

Per richiamare la funzione javascript dal pulsante di submit può essere utile la proprietà OnClientClick.