Upload di file in Asp.NET e Javascript

Siti dinamici con ASP.NET
Impara a creare siti ed applicazioni Web con Microsoft .NET

Scritto da Luca Ruggiero nella sezione Asp.NET

Dalla notte dei tempi l'upload, ovvero il trasferimento di un file da un client ad un server Web, è l'applicazione più noiosa ed angosciante da programmare in Asp tradizionale. In Asp.NET gli scenari sono cambiati: grazie al metodo NomeDelCampoFile.PostedFile.SaveAs() è possibile effettuare l'operazione di upload, con una sola riga di codice!

Ad ogni modo, l'applicazione che svilupperemo in questa sede sarà un po più complessa e completa, rifinita nei minimi particolari del caso.

Non starò a spiegare sintatticamente tutti i passaggi, dato che chiunque abbia un minimo di conoscenza della filosofia della programmazione con un linguaggio C-like, non troverà difficoltà a leggere il codice. Mi soffermerò soprattutto sulla logica con cui ho realizzato un'applicazione completa, funzionante ed immediatamente utilizzabile senza bisogno di alcuna modifica.

Inizio col mostrare il codice completo dell'applicazione, commentandola nelle sue fasi salienti:

<%@ Page Language="C#" %>
<script runat="server"> 
    void Upload(Object Sender, EventArgs e)
    {
        // Recupero il valore dei campi del modulo
        String File = sFile.Value;
        String Nome = sNome.Value;

        // Eseguo il controllo sui campi
        if (File == "")
        {
            Messaggio.Text = "Scegli un file da caricare";
        }
        else if (Nome == "")
        {
            Messaggio.Text = "Conferma il file scelto";
        }
        else
        {
            // Eseguo l'upload
            sFile.PostedFile.SaveAs(Server.MapPath(Nome));
            Messaggio.Text = "File caricato con successo";
        }
    }
</script>
<html>
    <head>
        <title>Upload di file in Asp.NET & Javascript</title>
        <script language="javascript">
            <!--
                // Recupero il nome e l'estensione del file
                function daCaricare()
                {
                    var sFile = document.fUpload.sFile.value;
                    if (sFile == "" || sFile == "undefined")
                    {
                        alert("Scegli un file da caricare");
                    }
                    else
                    {
                        var sReplace = sFile.replace(/\/g,"\");
                        var sArray = sReplace.split("\");
                        var sItem = sArray[sArray.length - 1]
                        document.fUpload.sNome.value = sItem;
                        alert("File da caricare confermato, adesso esegui l'Upload");
                    }
                }
            //-->
        </script>
    </head>
<body>

<form id="fUpload" enctype="multipart/form-data" runat="server">
    File da caricare<br>
    <input type="file" id="sFile" runat="server">
    <input type="button" id="bConferma" value="Conferma" OnClick="daCaricare()"><br>
    <input type="hidden" id="sNome" name="sNome" value="" runat="server">
    <input type="button" id="bUpload" value="Upload" OnServerClick="Upload" runat="server">
</form>

<asp:label id="Messaggio" runat="server" />

</body>
</html>
Ho approfittato di questo Articolo, a puro scopo didattico, per costruire un'applicazione che integri Asp.NET (in questo caso con C#) e Javascript lato client; l'utilizzo che ho fatto di quest'ultimo è relativo al recupero del nome e dell'estensione del file, isolandoli dal percorso completo sul client.

Supponiamo che io intenda caricare il file
C:Documents and SettingsmioutenteDesktopMioFile.zip
ho la necessità di isolare MioFile.zip, dato che è solo con quest'ultimo che l'applicazione deve interagire; a questo scopo ho utilizzato la funzione client daCaricare(), descritta nel codice di sopra presentato.

In effetti il tutto si basa su questa funzione e sulla logica con cui è stato realizzato il modulo per la selezione del file da caricare; l'utente deve scegliere il file sfogliando il proprio Hard Disk, poi deve confermare la scelta: in questa fase scateno la funzione Javascript che esegue il sezionamento della stringa rappresentata dall'intero percorso del file, e memorizza il valore definitivo (nomefile.ext) in una casella di testo nascosta, il cui valore viene utilizzato dallo script Asp.NET per caricare il file.

I più cliccati della sezione Asp.NET

:: Guida base ad Asp.NET (56.696)

:: I Validation Controls di Asp.NET (29.059)

:: Utilizzo delle QueryString con Asp.NET e C Sharp (23.369)

:: Visualizzare i record di un database Access con Asp.NET (20.956)

:: Un Guestbook in ASP.NET, Access e ADO (18.570)

:: Inviare email con Asp.NET: il Namespace System.Web.Mail (17.886)

:: Gestione delle News in ASP.NET (13.312)

:: Una Newsletter in ASP.NET (11.977)

:: Inserire dati in un database Access con Asp.NET (11.604)

:: Risolvere un indirizzo IP ed individuare nome macchina e dominio in Asp.NET (9.971)

IN EVIDENZA
DOWNLOAD