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.
Espero que esto te ayude! Deja tus comentarios y sugerencias, te lo agradeceré mucho.