Subir varios archivos en ASP.NET usando jQuery

Subir varios archivos en ASP.NET usando jQuery, es una forma muy rápida y sencilla para subir archivos a tu servidor (alojamiento web). Primero agregamos un control FileUpload de asp.net, agregamos un botón, las referencias jQuery y el estilo CSS, y al final poner el código de servidor para subir los archivos y listo.

jQuery crea una lista de controles FileUpload guardados en StateView, por lo que solo realizamos un ciclo para recorrer HttpFileCollection y empezar a guardar los archivos en el servidor.

Es posible que desees saber/aprender que es lo que hace el jQuery, para ser capaz de personalizar todas las acciones. La css se puede modificar muy fácilmente.

Paso 1: hay que descargar: jQuery 1.3.2, jQuery VS 2008 Doc  y Multiple File Upload PlugIn. Cuando los hayas descargado, ponlos en la carpeta de tus Script.

Paso 2: Crear una página y agregamos las referencias de los script.

    <script src="Js/jquery-1.3.2.js"></script>
    <script src="Js/jquery.MultiFile.js"></script>

Paso 3: Añadir los estilos CSS.

    <style type="text/css">
        .MultiFile-label a {
            width: 50px;
            height: 30px;
            background-color: #fb4141;
            color: #FFF;
            border: 0;
            padding: 3px 7px;
            text-decoration: none;
        }

            .MultiFile-label a:hover {
                width: 50px;
                height: 30px;
                background-color: red;
                color: #e5e5e5;
                border: 0;
                padding: 3px 7px;
                text-decoration: none;
            }

        .MultiFile-list {
            height: 300px;
            width: 300px;
            padding: 10px 16px;
            border: dashed silver 1px;
            background-color: #f9f4f4;
        }

        .MultiFile-label {
            padding-top: 5px;
            padding-bottom: 5px;
            margin-top: 10px;
        }

        .Multifile-UploadAllButton {
            width: 75px;
            height: 30px;
            background-color: #6262e9;
            color: #FFF;
            border: 0;
            text-decoration: none;
            text-align: center;
        }

            .Multifile-UploadAllButton:hover {
                width: 75px;
                height: 30px;
                background-color: #2f2fe7;
                color: #e5e5e5;
                border: 0;
                text-decoration: none;
                text-align: center;
                cursor: pointer;
            }

        .Multifile-UploadAll-div-Button {
            text-align: right;
        }

        .Multifile-vk-panel {
            width: 335px;
            height: 350px;
        }
    </style>

Paso 3: Añadir los controles.

        <div class="Multifile-vk-panel">
                <div>
                    <asp:FileUpload ID="FileUploadVKSample" runat="server" class="multi" accept="gif|jpg|png|bmp" maxlength="7" />
                </div>
                <div class="Multifile-UploadAll-div-Button">
                    <asp:Button ID="btnUpload" runat="server" Text="Upload All" CssClass="Multifile-UploadAllButton" OnClick="btnUpload_Click" />
                </div>
            </div>
        </div>

Paso 4: Añadir el código de servidor.

   Protected Sub btnUpload_Click(sender As Object, e As EventArgs) Handles btnUpload.Click
        Try
            'Get the HttpFileCollection
            Dim hfCollection As HttpFileCollection = Request.Files
            For i As Integer = 0 To hfCollection.Count - 1
                'Get the specific HttpPostedFile by index
                Dim hPostedFile As HttpPostedFile = hfCollection(i)
                If hPostedFile.ContentLength > 0 Then
                    'Upload/save to the server
                    hPostedFile.SaveAs(Server.MapPath("~/SubirMultiplesArchivos/") & "\" & System.IO.Path.GetFileName(hPostedFile.FileName))

                    'Report the file was uploaded - you can customize this part -
                    Response.Write((("<b>File: </b>" & hPostedFile.FileName & " <b>Size:</b> ") & hPostedFile.ContentLength & " <b>Type:</b> ") & hPostedFile.ContentType & " Uploaded Successfully <br/>")
                End If
            Next
            'TOOD: report if a error was fired.
        Catch ex As Exception

        End Try
    End Sub

RESULTADO:

IMPORTANTE

Recuerda que debes modificar el "el máximo tamaño de los archivos" en el web.config, esto para que permita cargar archivos más grandes. El diseño tu se lo puedes dar, ese solo tu imaginación y tu creatividad son el limite.

En esta liga puedes descargar el ejemplo completo.