Home Page Home Page Articoli Ridimensionare al volo le immagini uploadate sul server, per creare le ThumbnailImages.

Ridimensionare al volo le immagini uploadate sul server, per creare le ThumbnailImages.

Molto spesso ci capita di voler visualizzare un'anteprima di un'immagine che magari ha grosse dimensioni. In questo articolo verrà spiegato come creare le immagini ridimensionate senza perdita di qualità.
Autore: Valerio Fornito Livello:
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.
Voto medio articolo: 4.7 Numero Voti: 6

File allegati


82_source.zip (1 Kbyte)
Valerio Fornito

Valerio Fornito

Laurea in briscola nucleare Profilo completo

Articoli collegati

Utilizzare controlli lato server in un Datagrid
Il DataGrid è un controllo molto avanzato spesso usato in ASP.NET. La maggior parte degli sviluppatori utilizza le funzioni basilari. E' possibile però estenderlo utilizzando controlli server aggiuntivi all'interno delle celle. Vediamo un esempio con una Combo Box.
Autore: Luca Graziani | Difficoltà: | Commenti: 6 | Voto:
Utilizzare il Tracing in ASP.NET
Scopriamo in questo articolo il servizio di analisi di ASP.NET che permette di controllare e analizzare le richieste web, consentendo di scrivere nel log del servizio di analisi in modo da effettuare a runtime una sorta di debug dell'applicazione Web.
Autore: Marco Caruso | Difficoltà: | Commenti: 1 | Voto:
Spedire messaggi SMS con .NET
Spiegheremo in questo articolo alcune tecniche per inviare messaggi SMS tramite .NET: invio tramite Web Service, invio diretto tramite cellulare oppure invio tramite un SMS Gateway. Presente anche un esempio pratico di invio con ASP.NET e Web Service.
Autore: David De Giacomi | Difficoltà: | Commenti: 9
Utilizzare il Web Service dei SQL Reporting Services da una pagina ASP.NET
Vedremo in questo articolo un altro modo di utilizzo dei Reporting Services. Mostreremo infatti come consumare il Web Service offerto dai RS per esportare i Reports in vari formati (XML, Excel, PDF, HTML, CSV) e visualizzarli in una pagina ASP.NET.
Autore: Marco Caruso | Difficoltà: | Commenti: 1 | Voto:
Visualizzare gerarchicamente i dati con una speciale DataGrid
La rappresentazione grafica di dati gerarchicamente connessi tra loro può essere realizzata anche con l'ausilio di un free control, creato da Denis Bauer, ottenendo un risultato veramente ottimo sia dal punto di vista grafico sia da quello funzionale.
Autore: Andrea Bersi | Difficoltà: | Commenti: 1 | Voto:
Mobile Web Forms e compatibilità tra Device
Ecco un articolo che illustra la creazione di una pagina mobile, tenendo conto delle compatibilità tra vari Device mobili.
Autore: Giovanni Ferron | Difficoltà:
DataSet, CreateChildView, e DataRelation: usare DataGrid per visualizzare dati da 2 tabelle
Un semplice e chiaro esempio per sfruttare al meglio il controllo DataGrid, per la visualizzazione di dati provenienti da 2 tabelle diverse, ma collegate fra loro. Viene spiegato come utilizzare il DataSet per creare delle relazioni tra le tabelle in esso contenute.
Autore: Andrea Bersi | Difficoltà: | Commenti: 1 | Voto:
Caching di pagine ASP.NET
Quando si ha a che fare con l'ingegnerizzazione di un programma la gestione del cache è una cosa importante. La "cache" e' un'area molto veloce (di solito la RAM) dove vengono copiati i dati che necessitano di essere disponibili nel piu breve tempo possibile. Vediamo com'è possibile gestire la Cache in ASP.NET
Autore: Matteo Raumer | Difficoltà:
Paginare un Datalist utilizzando il metodo ReadXml della classe Dataset
Il controllo DataGrid è uno strumento molto completo, ma che a volte può risultare troppo complesso in base alle esigenze della nostra applicazione. In questo articolo verrà spiegato come utilizzare al massimo il controllo DataList, anch'esso ottimo visualizzatore di dati, utilizzando però un'origine dati in formato XML, implementandone la paginazione.
Autore: Matteo Raumer | Difficoltà:
Come paginare un DataList
In questo articolo viene spiegato come paginare un DataList, grazie all'aiuto di stored procedure e al supporto per il paging offerto dal controllo stesso. Per ottenere una paginazione veloce, leggera, e personalizzabile al massimo.
Autore: Loris Badii | Difficoltà: | Commenti: 2 | Voto:
Renderizzare automaticamente gli URL come links in formato HTML
Molto spesso ci capita di dover visualizzare nelle pagina web degli URL, letti magari dal DB, ma che non ci vengono visualizzati subito come link cliccabili dall'utente. In questo articolo verrà spiegato come automatizzare questo processo.
Autore: Valerio Fornito | Difficoltà: | Voto:
Copyright © dotNetHell.it 2002-2017
Running on Windows Server 2008 R2 Standard, SQL Server 2012 & ASP.NET 3.5