In questo post vorrei illustrarvi come creare un controllo per l’upload multiplo di immagini, documenti, pdf, file zippati... con Asp.NET.
Uplodare contemporaneamente più file, magari di estensione diversa tra loro, non è più un problema.
In rete potrete trovare diversi esempi per php ma pochissimi per Asp.NET, quindi mi sembra del tutto opportuno risolvere questa situazione di minoranza.
Fin da ora vi posso dire che Asp.NET da solo non basta (come del resto php), ma se lo relazioniamo con Adobe Flash ed un poco di JQuery, tutto diventafattibile.
Utilizzeremo un plugin per JQuery chiamato uploadify, molto performante ma a mio avviso non subito comprensibile, visto che riporta esempi esclusivi in PHP.
Per prima cosa scarichiamo il plugin gratuito dal sito ufficiale. In questo esempio utilizzeremo la versione 2.1.0 ma qualsiasi altra versione superiore può andare bene.
All’interno del pacchetto scaricato, troveremo diversi file e cartelle:
-
la versione minimized di JQuery
-
le 2 versioni full e minimized del plugin uploadify
-
Una completa documentazione in formato PDF e DOC
-
dei file .swf che ci serviranno per poter utilizzare il plugin
-
il file Adobe Flash sorgente .FLA (per chi ha voglia di implementare il progetto)
-
due cartelle con dei pacchetti per Adobe Flash e degli esempi pratici
-
due file php per capire il processo dinamico del plugin
Premetto che all’interno del file zippato e del sito ufficiale troverete un’ampia documentazione riguardante l’utilizzo del plugin in se, ma niente che spieghi come utilizzarlo con Asp.NET.
Creazione della pagina che conterrà il controllo
Tutto ciò che ci serve è dentro la cartella “example” del file zippato, esclusi il file php che nel nostro caso sono inutili.
Iniziamo con l’inserire all’interno della nostra pagina principale, tra i tag <head></head> i riferimenti ai file che dovremo utilizzare
<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="scripts/swfobject.js"></script>
<script type="text/javascript" src="scripts/jquery.uploadify.v2.1.0.min.js"></script>
ora inseriamo un controllo per l’upload dei file
<input id="uploadify1" name="uploadify1" type="file" />
a questo punto sempre all’interno dei tag <head></head> creiamo una spazio JavaScript (<script type=”text/javascript”></script>) dentro il quale inseriremo il codice per l’implementazione del multi-upload
$(document).ready(function() {
$('#uploadify1').uploadify({
'uploader': 'scripts/uploadify.swf',
'checkScript': 'scripts/Check.ashx',
'script': 'Scripts/Upload.ashx',
'folder': 'uploads/',
'cancelImg': 'images/cancel.png',
'multi': true,
'fileDesc': 'File immagine',
'fileExt': '*.jpg;*.gif;*.png;',
'sizeLimit': '4194304',
'auto': true,
'onComplete': function (a, b, c, d, e) {
//codice da implementare
}
});
});
vi spiego velocemente le proprietà di configurazione appena impostate:
uploader = file swf che si occupa della finestra di gestione file
checkSript = file Asp.NET che si occupa di verificare se il file da caricare è già esistente nella directory di destinazione
script = file Asp.NET che si occupa di attuare l’upload per ogni file da caricare
folder = cartella di destinazione degli uploads
cancelImg = immagine del pulsante annulla
multi = indica se eseguire multi-upload o single-upload
fileDesc = descrizione dei file da caricare
fileExt = estensione del file da caricare
sizeLimit = limite di peso complessivo dei file da caricare
onComplete = funzione da eseguire al termine di ogni upload
auto = valore che indica se l’upload deve partire immediatamente dopo la selezione dei files
Tutte le proprietà (incluse quelle qui non elencate) sono ben descritte all’interno della documentazione ufficiale.
Creazione dello script Asp.NET per la verifica dei files
Ora al caricamento della pagina vedremo un pulsante per l’upload multiplo dei file, ma risulterà non funzionante se non creiamo i file Asp.NET per la gestione dei caricamenti.
Per conformità e pulizia all’interno del nostro sito, utilizzeremo dei file di gestione generici con estensione .ashx.
Questo file verificherà che i file che caricato non siano già esistenti all’interno del server:
<%@ WebHandler Language="VB" Class="Check" %>
Imports System
Imports System.Web
Imports System.IO
Public Class Check : Implements IHttpHandler
Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
context.Response.ContentType = "text/plain"
'recupero il percorso assoluto per la directory di uploads del server
Dim path As String = context.Server.MapPath(context.Request.Form("folder"))
Dim trovato As Boolean = False
Dim json As String = "{"
For Each s As String In context.Request.Form.AllKeys
If Not s = "folder" Then
'verifico se il file esiste
If File.Exists(path & context.Request.Form(s)) Then
'se true creo una string JSON per avvisare che il file esiste
trovato = True
json &= String.Format("'{0}':'{1}',", s, context.Request.Form(s))
End If
End If
Next
If Not trovato Then
'se non è stata trovata nessuna corrispondenza
json = "{}"
Else
'se è stata trovata nessuna corrispondenza
json = Left(json, json.Length - 1)
json &= "}"
End If
'rilascio la stringa JSON
context.Response.Write(json)
End Sub
Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
Get
Return False
End Get
End Property
End Class
salviamo il file all’interno della cartella scripts con il nome di Check.ashx.
Questo file crea in maniera un po’ rudimentale una stringa in formato JSON che restituisce dei valori booleani per i files già esistenti all’interno del server, bloccando il medesimo upload con un messaggio di avviso.
Creazione dello script Asp.NET per il caricamento in upload dei files
questo file caricherà i file all’interno di una cartella del server:
<%@ WebHandler Language="VB" Class="Upload" %>
Imports System
Imports System.Web
Imports System.IO
Public Class Upload : Implements IHttpHandler
Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
context.Response.ContentType = "text/plain"
'recupero il percorso assoluto della directory di destinazione
Dim folder As String = context.Server.MapPath(context.Request.Form("folder"))
MsgBox(folder)
'se la directory di destinazione non esiste la crea
If Not Directory.Exists(folder) Then
Directory.CreateDirectory(folder)
End If
'salvo su disco ogni file caricato
If context.Request.Files.Count > 0 Then
For n As Short = 0 To context.Request.Files.Count - 1
Dim fileWrite As HttpPostedFile = context.Request.Files.Get(n)
fileWrite.SaveAs(folder & System.IO.Path.GetFileName(fileWrite.FileName))
fileWrite = Nothing
Next
'rispondo per caricamento andato a buon fine
context.Response.Write("True")
End If
End Sub
Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
Get
Return False
End Get
End Property
End Class
Ora tutto è completo e pronto per essere eseguito su server, visto che in locale non darebbe nessun risultato.
Un esempio completo e funzionante di upload multiplo con Asp.NET, comprensivo degli elementi appena descritti potete scaricarlo da qui.
Arrivederci al prossimo articolo