Jag inser nu att informationen var lite bristfällig...
Jag har ingen submit-knapp utan bara en vanlig knapp som kör doUpload(). I doUpload() skapar jag ett ID som jag lägger på i formulärets "action". Detta används av komponenten på servern som hanterar uppladdningen. Sedan postar jag formuläret i skriptet, döljer formuläret, visar uppladdningsstatus och "beställer" slutligen att statusen ska uppdateras om 500 ms med setTimeout("updateProgress()", 500). I Safari körs aldrig updateProgress() vilket sker i både IE och FF.
Nu har jag kommenterat koden för att det ska bli enklare att följa med.
var uploadID = "";
function doUpload()
{
// Skapa en tillräckligt unik ID-sträng för uppladdningen
uploadID = ((new Date()).getTime() % 1000000000) + "";
// Skicka med ID-strängen i querystringen när formuläret postas (uppladdningen får detta ID på servern)
document.forms["<%# TheForm.ClientID %>"].action= "FileUpload.aspx?UploadID=" + uploadID;
// Posta formuläret
document.forms["<%# TheForm.ClientID %>"].submit();
// Dölj formuläret
document.getElementById("<%# TheForm.ClientID %>").style.display = "none";
// Visa uppladdningsstatusen (en DIV med innehåll)
document.getElementById("ProgressBar").style.display = "block";
// Justera höjden på dialogrutan
if (navigator.userAgent.toLowerCase().indexOf("firefox") > -1)
top.resizePopup(document.documentElement.offsetHeight);
else
top.resizePopup(document.documentElement.scrollHeight);
// Kör metoden updateProgress() om 500 ms
window.setTimeout("updateProgress()", 500);
}
function updateProgress()
{
// Kör AJAX-metoden GetProgressInfo, låt metoden updateProgressCallback ta hand om returvärdet, skicka eventuella fel till metoden updateProgressError
Bmc.Ajax.ABCUploadProgressBar.GetProgressInfo(uploadID, updateProgressCallback, updateProgressError);
}
function updateProgressError(error)
{
// Visa felet
alert(error.get_message());
}
function updateProgressCallback(r)
{
// Om svaret från AJAX-metoden (r) är en array med 8 poster
if (r.length == 8)
{
// skriv ut massa strängar
document.getElementById("Progress_Mins").innerHTML = r[0];
document.getElementById("Progress_Secs").innerHTML = r[1];
document.getElementById("Progress_Kbdone").innerHTML = r[3];
document.getElementById("Progress_Kbtotal").innerHTML = r[4];
document.getElementById("Progress_Kbps").innerHTML = r[2];
document.getElementById("Progress_Note").innerHTML = r[5];
document.getElementById("Progress_FileName").innerHTML = r[6];
// Sätt bredden på själva progressbaren i procent
document.getElementById("Progress_Bar").style.width = r[7] + "%";
// Kör metoden updateProgress() om 500 ms igen
window.setTimeout("updateProgress()", 500);
}
// om det bara finns 1 post i r är uppladdningen klar
else if (r.length == 1)
{
// Skriv ut statusmeddelande (r[0] innehåller alltid strängen 'Processing image...')
document.getElementById("Progress_Note").innerHTML = r[0];
// Sätt bredden på statusbaren till 100%
document.getElementById("Progress_Bar").style.width = "100%";
// Lägg en animerad GIF som bakgrundsbild för att indikera att servern jobbar med den uppladdade bilden
document.getElementById("Progress_Bar").style.backgroundImage = "url(/Images/AnimBusy.gif)";
}
}
