Uploadify är en plugin till jQuery som gör det extremt enkelt att skapa ett fint uppladdningsformulär. Tekniken bygger på javascript, flash samt valfritt serverspråk. Här kommer vi givetvis att hålla oss till ASP.NET/C# för att åstadkomma själva sparandet av den uppladdade filen.

Det första vi måste göra är att ladda hem själva plugin:en. Detta gör du från nedanstående webbplats.

http://www.uploadify.com/download/

När du laddat hem pluginen så kan du packa upp alla filerna till din dator.

Nästa steg är att skapa en ny ASP.NET webbplats i Visual Studio. När webbplatsen är skapad så skapar vi några mappar för att hålla lite ordning på våra olika filer. De mappar jag har skapat är scripts, handler samt en kallad upload som kommer att vara den katalog som vi laddar upp våra filer till.

När detta är klart så kopierar vi filerna

jquery-1.3.2.min.js
jquery.uploadify.js

till mappen scripts samt lägger filerna

cancel.png
uploader.swf
uploadify.css

i root-katalogen för vår webbplats.

Om Visual studio inte skapa en aspx-fil åt dig så skapar du denna och öppnar upp den. Det första vi måste göra här är att inkludera javascript-filerna. Detta görs genom script-taggar i head-taggen.

<script src="scripts/jquery-1.3.2.min.js" type="text/javascript" language="javascript"></script>
<script src="scripts/jquery.uploadify.js" type="text/javascript" language="javascript"></script>

Skapa sedan upp ett valfritt element på din webbsida med valfritt ID. Jag skapade en div som jag valde att sätta ID=Uploader på. Detta ID ska vi sedan använda när vi skapar själva uppladdningsformuläret med hjälp av Uploadify. I body skriver vi alltså

<div id="Uploader">
    
</div>

I head-taggen ska vi sedan "aktivera" själva pluginen och göra om vår div-tagg till ett uppladdningsformulär. Detta görs genom följande enkla kodrader.

<script type="text/javascript">
        $(document).ready(function() {
            $('#Uploader').fileUpload({
            'script': 'handler/upload.ashx',
            'auto': true
            });
        });
</script>

Det vi gör här är att säga till att direkt som DOM:en är redo så tar vi vårat element med ID=Uploader och gör om det till ett uppladdningsformulär med hjälp av pluginen. När du kommit så här långt kan du kolla på din skapade webbsida i webbläsaren och se att det skapas en knapp med texten browse. Dock går det ännu inte att ladda upp något då vi inte skapat filen som tar emot filen och sparar den på hårddisken. Detta ska vi göra nu så nästa steg är att skapa en fil vid namn upload i mappen handler och denna fil ska vara en generic handler (ashx). Koden som krävs för att spara själva filen är väldigt liten och ser ut på följande sätt

// Ta emot filen
HttpPostedFile file = context.Request.Files["Filedata"];

// Först tar vi fram mappen som filen skall sparas i
string targetDirectory = Path.Combine(context.Request.PhysicalApplicationPath, "upload");
// och sedan lägger vi till den uppladdade filens namn till sökvägen
string targetFilePath = Path.Combine(targetDirectory, file.FileName);

// Sedan skriver vi filen till disk
file.SaveAs(targetFilePath);
// och skickar tillbaka 1
context.Response.Write("1");

Det var allt som krävdes för att ladda upp en fil med hjälp av Uploadify. Om du får problem så kontrollera att du har alla behörigheter som krävs för att få spara filer på disk. Givetvis finns det mängder med inställningar du kan göra för plugin:en, och dessa finns dokumenterade på Uploadify:s hemsida för den intresserade.

Vill du se alla filerna som hör till artikeln så kan du ladda ner alltihopa här bredvid. Uploadify.zip (45,91 kb)