ciao a tutti,
Utilizzo il codice sottostante per visualizzare la progress bar durante l'upload solo che quella di default è un po "bruttina":
codice:
var xmlHttp;
var TimoutID;
var strSessionID;
var IsChrome; // chrome requires special treatment
function GetXmlObject()
{
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
function stateChanged()
{
if (xmlHttp.readyState == 4)
{
// Empty response means we are finished.
if( xmlHttp.responseText == "" )
{
document.getElementById('txtProgress').innerHTML = "";
clearTimeout(TimoutID);
TimoutID = setTimeout( 'Update()', 1000); // Firefox seems to need this.
return;
}
var Xml = xmlHttp.responseXML;
var PercentComplete = Xml.getElementsByTagName('PercentComplete')[0].firstChild.nodeValue;
var RemainingTime = Xml.getElementsByTagName('RemainingTime')[0].firstChild.nodeValue;
var TransferSpeed = Xml.getElementsByTagName('TransferSpeed')[0].firstChild.nodeValue;
var TotalBytes = Xml.getElementsByTagName('TotalBytes')[0].firstChild.nodeValue;
var UploadedBytes = Xml.getElementsByTagName('UploadedBytes')[0].firstChild.nodeValue;
var strFormat = "<table><tr><td colspan=2><table style=\"width: 220; border: 1pt black solid\"><tr><td>" +
"<table background=progress.gif height=19 width=\"" + PercentComplete + "%\"><tr><td></td></tr></table>" +
"</td></tr></table></td></tr><tr style=\"font:family: arial; font-size: 10pt;\">";
strFormat += "<td>" +
RemainingTime + " left (at " +
TransferSpeed + ")</td><td align=right>" +
UploadedBytes + "/" +
TotalBytes + "(" +
PercentComplete + "%) </td></tr></table>";
document.getElementById('txtProgress').innerHTML = strFormat;
// schedule next update in 1 sec.
clearTimeout(TimoutID);
TimoutID = setTimeout( 'Update()', 1000);
}
}
function OnStop()
{
if( navigator.appName == "Microsoft Internet Explorer" )
{
document.execCommand('Stop');
}
else
{
window.stop();
}
document.getElementById('txtProgress').innerHTML = "Stopped";
clearTimeout(TimoutID);
}
function ShowProgress( strPID )
{
xmlHttp = GetXmlObject();
if( xmlHttp == null )
{
alert( 'Your browser does not support AJAX!');
return;
}
xmlHttp.onreadystatechange = stateChanged;
// Chrome and Safari require false instead of true in xmlHttp.Open
IsChrome = navigator.userAgent.indexOf('Chrome') >= 0 || navigator.userAgent.indexOf('Safari') >= 0;
strSessionID = strPID
Update();
}
function Update()
{
// Chrome and Safari require false instead of true in xmlHttp.Open
xmlHttp.open('GET','progress_ajax_update.asp?pid=' + strSessionID, !IsChrome );
xmlHttp.onreadystatechange = stateChanged;
xmlHttp.send(null);
}
Mentre il suo HTML è così:
codice:
<div id="txtProgress">
(poi qui dentro ci pensa javascript)
</div>
A me piacerebbe sostituire SOLO la progress bar blu con il codice sottostante (ovviamente lasciando il testo sotto la progress bar, per esempio il tempo rimanente oppure i mb che si stanno caricando)
codice:
<div id="txtProgress">
<div id="avanzamento"></div>
</div>
#txtProgress {
background-image: url("progressbarbg.png");
border-radius: 3px 3px 3px 3px;
height: 22px;
width: 413px;
}
#avanzamento {
background-image: url("progressbar.gif");
background-position: left center;
background-repeat: repeat-x;
border-radius: 3px 3px 3px 3px;
height: 22px;
}