FileUpload con jQuery y ASP.NET

En los dos artículos anteriores, vimos como poder realizar la subida de archivos en primera medida con el FileUpload estándar que ofrece ASP.Net (míralo acá) y como segunda parte como realizar la misma acción pero esta vez utilizando el FileUpload del AjaxControlToolkit (revísalo acá).

Y hoy vamos a ver como tener un FileUpload pero esta vez utilizando jQuery.

Existe gran cantidad de plugins de jQuery que permiten tener un control para realizar la subida de archivos, pero en este ejemplo voy a utilizar el Multiple File Upload.

Dicho plugin tiene varias características interesantes, las que más me gustan son:

1. Permite subir múltiples archivos.
2. Permite especificar los archivos que es posible subir.
3. Limitar el número de archivos.

Como usar el plugin:

1. Establecer la propiedad class=”multi”
2. Para limitar el número de archivos se debe utilizar la propiedad maxlength=”número de archivos”
3. Para definir el tipo de archivo permitido utilizar la propiedad accept=”tipos de archivos”

Ahora nuestro código HTML sería:

<asp:FileUpload ID="uploadFile1" runat="server" class="multi"
    maxlength="3" accept="gif|jpg|png" />
<asp:Button ID="btnSubir" runat="server" Text="Subir Archivos" />
<asp:Label ID="lblMensaje" runat="server" ForeColor="Red"></asp:Label>

Como se puede ver se hace uso del control FileUpload, se está definiendo la class=”multi”, un máximo de 3 archivos y se esta limitando a subir archivos que sean únicamente imágenes.

Ahora el código del botón que implementará la lógica para la subida de los archivos:

Dim files As HttpFileCollection = Request.Files
For i As Integer = 0 To files.Count - 1
    Dim postedFile As HttpPostedFile = files(i)
    If postedFile.ContentLength > 0 Then
        postedFile.SaveAs(Server.MapPath("files\") & Path.GetFileName(postedFile.FileName))
        lblMensaje.Text="Archivos subidos correctamente."
    End If
Next i

Primero se obtiene una colección de todos los archivos a cargar,  luego se recorre mediante un ciclo for cada archivo de la colección y finalmente se utiliza el método SaveAs para guardar el archivos.

Finalmente al seleccionar varios archivos en pantalla estos se visualizarán en pantalla y podrán ser eliminado en caso de no ser el archivo que se quiere subir:

Como se ha podido ver, este plugin es bastante fácil de utilizar y permite ampliar las capacidades del FileUpload ofrecido por ASP.NET.

Como siempre les dejo el código tanto en VB como C#.

Código en VB !

Código en C# !

About these ads