Asp.net introduce un innovativo set di tools per uploadare e maneggiare le immagini. In questo articolo scopriremo come una piccola porzione di codice può permetterci di aggiungere al nostro sito un file upload.
Niente di meglio che un esempio per capire come utilizzare queste nuove funzioni: ora creiamo una piccola applicazione web che ci permette di creare una galleria d'immagini.

Tutti gli esempi usano Microsoft VisualBasic.Net come linguaggio di base.

Possiamo partire apredo un nuovo documento, per esempio usando Notepad, e aggiungere queste linee di codice all'inizio della pagina:


Imports System
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.Page
Imports System.Drawing
Imports Microsoft.Visualbasic


Con queste stringhe, avviamo la nostra applicazione richiamando alcune applicazioni .NET come System.Drawing, che aggiunge un tool per la manipolazione di immagini, e Microsoft.VisualBasic, che sarà utile quando avremo bisogno di creare nomi univoci.

Ora creiamo un nuovo Namespace ed una classe:

Namespace ccupload
public class ccuploadset

ed una funzione per la nostra applicazione:

Public function SetUpload (path as string, myFile as object, lblMsg as object, successText as string) as string

In quest'ultimo tratto di codice inizia la nostra vera applicazione perchè dentro questo cominciamo a scrivere il codice per eseguire con successo il nostro progetto.
Impostiamo alcune variabili:

- path as string: il percorso del file che vorremo salvare sul nostro server.
- myFile as object: sarà il form che useremo per selezionare i file nel computer dell'utente.
- lblMsg as object: con questo possiamo mostrare nella nostra pagina un messaggio di avvenuto upload dell'immagine.
- successText as string: la stringa di testo contenuta in lblMsg.

Ora dobbiamo creare un nome univoco per il nostro file immagine: è un passo importante, poichè asp.ne non controlla se un file è presente nel nostro server con lo stesso nome. Possiamo rassicurarci quindi usando questa porzione di codice che rinomina il file con un nuovo nome alfanumerico:


dim myUValue as string
dim myUName as string
dim i as integer
For i = 1 To 30
Randomize()
MyUValue = CInt(Int((100 * Rnd()) + 1)) & myUValue
next


il passo successivo è carpire l'estensione del file immagine:


Dim intFileNameLength as Integer
Dim strFileNamePath as String
Dim strFileExtension as String

If Not (myFile.PostedFile Is Nothing) Then
'Logic to find the FileName (excluding the path)
strFileNamePath = MyFile.PostedFile.FileName
intFileNameLength = Instr(1, StrReverse(strFileNamePath), ".")
strFileExtension = Mid(strFileNamePath, (Len(strFileNamePath)-intFileNameLength)+2)


myFile.PostedFile Is Nothing controlla il campo myFile quando sarà richiamato.

Creiamo il nuome del file per l'immagine con dimensioni originali:


' create an unique name for the image
myUName=myUValue & "full." & strFileExtension
end if


Creiamo quindi un' anteprima (thumbnail in inglese) per quest'immagine con alcune caratteristiche: primo, un nome univoco, quindi una misura massima (espressa in pixel).
Poichè non tutte le immagini che uploadiamo possono essere di forma quadrata, usiamo un po' di matematica.

Comiciamo inizializzando alcune variabili per l'anteprima:


dim objBMP as System.Drawing.Bitmap
dim objGraphics as System.Drawing.Image


Quindi prendiamo delle informazioni importanti:


objBMP = New Bitmap(path & myUName)
dim imgw as integer = objBMP.width
dim imgh as integer = objBMP.height


Ora possiamo ridimensionare in scala l'immagine settando una misura massima. Questa misura è valida sia che l'immagine sia puù alta o più lunga.
Per questo esempio la dimensione massima sarà di 200 px di valore.


' Creating a Thumbnail with scale
Dim maxImage as integer = 200
dim newimgw as integer
dim newimgh as integer
if imgw > imgh then
newimgw = maxImage
newimgh = (imgh * maxImage)/imgw
else if imgh > imgw then
newimgw = (imgw * maxImage)/imgh
newimgh = maxImage
else
newimgw = maxImage
newimgh = maxImage
end if


Ora possiamo creare l'anteprima:


'ThumbNail it!!
objGraphics = objBMP.GetThumbnailImage(newimgw, newimgh, Nothing, IntPtr.Zero)


Infine diamogli un nome e salviamola:


' creates unique name for the thumbnail and save it on webserver folder
objGraphics.Save(path & myUValue & "tmbnl." & strFileExtension )


Chiudere funzione, classe e Namespace


End function
End Class
end Namespace


Salviamo questo file come ccupload.vb

In questo file abbiamo scritto tutto quello che ci serve per l'upload, ma ora dobbiamo eseguirlo affinchè il serve comprenda il nostro codice.
Innanzitutto trasformiamo il nostro codice in una .DLL:

Aprire Command: (start > esegui> cmd.exe) e scrivere:

vbc /t:library /out:bin\ccupld.dll /r:System.dll /r:System.web.dll /r:System.Drawing.dll ccupload.vb

Affinchè funzioni,questo file deve essere piazzato solo in una cartella chiamata BIN nella root del nostro sito.

Creiamo un file .aspx per usare il nostro nuovo custom control.
Sempre usando Notepad, creiamo un nuovo file di testo e scriviamo, all'inzio:

<%@ Import Namespace="ccupload" %>

quindi:


<html>
<head>
<script language="VB" runat="server">
sub upload_click(sender As Object, e As EventArgs)
dim myUpload as new ccupload.ccuploadset
myUpload.SetUpload ("C:\inetpub\wwwroot\upload\", myFile, lblMsg, "Upload
successfull!")
end sub
</script>


Nota c'è un tag script: in questo tago settiamo i parametri specificati in ccupload.vb:
In questo esempio usiamo:
"C:\inetpub\wwwroot\upload\" come percorso (vedi"path as string" nella prima pagina)
myFile come Campo del form per la selezione dei file (vedi "myFile as object" nella prima pagina)
lblMsg come label control per la visualizzazione del messaggio (vedi"lblMsg as object" nella prima pagina)
"Upload successfull!" come testo di successo (vedi"successText as string" nella prima pagina)

Ora il resto del codice per il form:


</head>
<body>
File Upload
<form enctype="multipart/form-data" runat="server">
<table width="261" border="0" cellspacing="3" cellpadding="0">
<tr>
<td width="43"><strong>File:</strong></td>
<td width="226">
<input name="file" type="file" id="myFile" runat="server">
</td>
</tr>
<tr>
<td height="24">&nbsp;</td>
<td><div align="right">
<input name="button" type=button value="Upload" OnServerClick="Upload_click" runat="server">
</div></td>
</tr>
<tr bgcolor="#FFCC00">
<td height="24" colspan="2"><asp:label ID="lblMsg" runat="server"/></td>
</tr>
</table>
</form>
</body>
</html>


Finito. Salva questa pagina come upload.aspx sul server quindi provala.

Congratulazioni! Ora hai un upload manager per il tuo sito!

Allegato a questo articolo trovi il codice sorgente dell'intero articolo, che puoi scaricare e provare sul tuo pc.