FileUpload med UpdatePanel
Förord
FileUpload kontrollen i ASP.NET fungerar inte tillsammans med UpdatePanel eftersom en asynkron uppladdning av en fil inte är möjlig. Det går däremot att använda en iFrame för att slippa att hela sidan laddas om. Denna artikel innehåller kodexempel på hur en sådan lösning kan se ut. Du kan ladda ner alla filer som en zip-fil här
Webbform med UpdatePanel (Default.aspx)
Först skapar vi en helt vanlig WebForm som innehåller en ScriptManager, UpdatePanel och en iFrame som pekar på vår UploadFiles.aspx WebForm som sköter själva uppladdningen.
GUI för uppladdning (UploadFile.aspx)
Detta är filen som iFramen pekar på från Default.aspx. Denna filen innehåller ett grafiskt gränssnitt för att ladda upp filen. Själva uppladdningen sker alltså inte asynkront, men besökaren får känslan av det eftersom själva huvudsidan inte laddas om.<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UploadFiles.aspx.cs" Inherits="UploadFilesAsync" %>
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="asp" %>
Ladda upp filer
<script language="javascript" type="text/javascript">
// Funktion som triggas när en fil har valts
function UploadFile()
{
// Posta filen
document.form1.btnUploadAsync.click();
// Visa progress bild
document.getElementById('iframeProgress').style.display = 'block';
// Göm upload boxen
document.form1.uploadAsync.style.display = 'none';
}
</script>
GUI för uppladdning CodeBehind (UploadFile.aspx.cs)
public partial class UploadFilesAsync : System.Web.UI.Page
{
// Mapp över applikationsroten som filen skall sparas i, måste ha write permissions
private static string BaseSaveFolder = "_PublicFiles";
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
// Trigga upload när en fil har valts
uploadAsync.Attributes.Add("onchange", "UploadFile()");
// Lägg till bekräftelse när filen skall tas bort
btnDelLink.Attributes.Add("onclick", "return confirm('Vill du verkligen ta bort denna fil?')");
// Göm panelen med felmeddelande
pnlFailed.Visible = false;
}
// If a file is uploaded then show it
if (Session["SavedPublicFile"] != null &&
Session["SavedFileName"] != null)
{
ShowUploadedFile();
}
}
#region Event methods
///
/// Sparar den valda filen till serverns filsystem
///
protected void btnUploadAsync_Click(object sender, EventArgs e)
{
try
{
// Ställ in målmapp och publik målmapp
string savePath = Request.PhysicalApplicationPath + BaseSaveFolder + @"\";
string savePublicPath = ResolveUrl("http://" + Request.ServerVariables["SERVER_NAME"] + Request.ApplicationPath + @"/" + BaseSaveFolder + "/");
// Skapa katalogen om den inte existerar
if (!Directory.Exists(savePath))
{
Directory.CreateDirectory(savePath);
}
// Kontrollera att upload boxen innehåller en fil
if (uploadAsync.HasFile)
{
// Hämta filen storlek i bytes
int fileSize = uploadAsync.PostedFile.ContentLength;
// Tillåt endast max 2MB stora filer.
// OBS! Om större filer än 4MB skall laddas upp måste web.config modifieras
// All data som är större än 256KB sparas ner på serverns disk innan den slutgiltiga filen sparas
// Detta gör att serverns minne inte tas upp av uppladdade filer.
if (fileSize < 2100000)
{
// Hämta filens namn
string fileName = uploadAsync.FileName;
// Hämta filens ändelse
string extension = System.IO.Path.GetExtension(fileName);
// Begränsa filändelser som tillåts
if ((extension == ".doc") |
(extension == ".xls") |
(extension == ".htm") |
(extension == ".html") |
(extension == ".pdf") |
(extension == ".docx") |
(extension == ".rtf"))
{
// Om filen finns, skapa ett unikt filnamn
int i = 1;
while (File.Exists(savePath + fileName))
{
fileName = fileName.Substring(0, (fileName.Length - extension.Length)) +
"_" + i.ToString() + extension;
i++;
}
// Spara den fullständiga sökvägen till filen
savePath += fileName;
savePublicPath += fileName;
// Spara filen på disk
uploadAsync.SaveAs(savePath);
// Spara referenser till filen i sessionen
Session["SavedFile"] = savePath;
Session["SavedPublicFile"] = savePublicPath;
Session["SavedFileName"] = fileName;
// Visa den uppladdade filen
ShowUploadedFile();
}
else
{
// Felaktig filändelse
pnlFailed.Visible = true;
pnlFileUpload.Visible = false;
lblUploadStatus.Text = "Felaktig filtyp! Kontrollera filändelsen.";
}
}
else
{
// För stor fil
pnlFailed.Visible = true;
pnlFileUpload.Visible = false;
lblUploadStatus.Text = "Du får maximalt ladda upp 2MB stora filer";
}
}
}
catch (Exception ex)
{
// Ett oväntat fel uppstod
pnlFailed.Visible = true;
pnlFileUpload.Visible = false;
lblUploadStatus.Text = ex.Message;
}
}
///
/// Tar bort en uppladdad fil från disken
///
protected void btnEraseFile_Click(object sender, EventArgs e)
{
// Ta bort filen om den finns
if (File.Exists(Session["SavedFile"].ToString()))
{
File.Delete(Session["SavedFile"].ToString());
}
// Töm sessionsvariablerna
Session["SavedFile"] = null;
Session["SavedPublicFile"] = null;
Session["SavedFileName"] = null;
// Visa upload boxen
ShowUploadBox();
}
///
/// Visar upload boxen igen
///
protected void lnkTryAgain_Click(object sender, EventArgs e)
{
ShowUploadBox();
}
#endregion
#region Show methods
///
/// Visar den uppladdade filen från en referens som sparats i sessionen
///
private void ShowUploadedFile()
{
lnkUploadedFile.Text = Session["SavedFileName"].ToString();
lnkUploadedFile.NavigateUrl = Session["SavedPublicFile"].ToString();
pnlFileUpload.Visible = false;
pnlFileUploaded.Visible = true;
}
///
/// Visar upload boxen
///
private void ShowUploadBox()
{
pnlFileUpload.Visible = true;
pnlFileUploaded.Visible = false;
pnlFailed.Visible = false;
}
#endregion
}
Progressbar för att visa status på uppladdningen
Vi skapar ytterligare en sida för att kunna visa besökaren en bild som rör sig när filen laddas upp. Detta är bara en enkel html sida som visar en gif bild. Denna sida länkas in genom en iframe från FileUpload.aspx
Progress Bar
Detta är allt som behövs för att göra en filuppladdning som ser ut som en asynkron uppladdning för din besökare.
Du kan ladda ner alla filer som en zip-fil här
0 Kommentarer