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# !

You may also like...

33 Responses

  1. PP says:

    Muchisimas gracias !! Buenísima solución !!

  2. rocio says:

    hola…disculpa por molestar pero esto me urge mucho…en el boton me marca error en
    Dim postedFile As HttpPsotedFile = file (i)
    if postedFile. ContentLength > 0 then
    postedFile.SaveAs (Server.MapPath(file) yyyyyyyyy todo lo demas

    nos e porke merca error …si me puede contestar pronto porfas

  3. mariobot says:

    Que buen articulo, como siempre muy acertadas tus recomendaciones y tips para mejorar la experiencia de usuario en nuestras aplicaciones.

  4. jesusalexis says:

    interesante….pero una consulta..y como hacemos para mostrar esos archivos…k subimos?….si es .pdf o .doc como los mostramos??

    • Hola, el tema de mostrar los archivos es algo complicado, a menos q sepas excatamente q tuipo de archivo vas a mostrar, me explic si es una imagen la puedes mostrar es un control image facilemtne, pero para el tema de archivos de la suite de office realmente mostrar el archivo te sera muy dificuil, deberias es tener un link para hbailitar la descagar del archivo.

  5. murel says:

    No puedo ejecutar tu proyecto de ejemplo. No me reconoce una propiedad targetframework del web.config. Saludos

  6. Carlos says:

    hola sera posible que permita seleccionar varias fotos y no solo de una en una?, muchas gracias

    Saludos

  7. murel says:

    Ademas de que no compila por el class=”multi”

  8. Y donde entra jquery en todo esto…? En todo tu explicación, aunque funciona muy bien, no referencia referencia a jquery por ningun lado, todo esto funciona normalmente con asp net, pero aqui no hay nada de jquery….

  9. Muchs gracias me sirvio de mucho =)

  10. Arturo Suarez says:

    Hola, cuando implemento el fileupload con los js funciona muy bien, pero al colocar otras librerias de jquery (las ultimas versiones) que necesito de pronto la página sale completamente vacía, quedando solo la información de las páginas maestras. ¿Que puedo hacer al respecto? Muchisimas gracias por tu post.

    • Hola amigo, la verdad es bn raro lo que pasa, se me ocurre que puedes revisar con firebug si tienes algun error o algun conflicto, alli puedes ver errores, warning etc, ademas te pregunto, cuando dices otras librerias de jquery te refieres a la ultima version de jquery o a plugins? quedo atento, saludos.

  11. Jaume Estrany Mas says:

    Hola Julio. He intentado subir ficheros .pdf y no me deja. ¿Donde controlas las extensiones que dejas subir?

  12. Oscar says:

    Hola buenas tardes una pregunta es posible subir archivos con el File Upload en una carpeta destino que no este dentro del proyecto.??
    Es decir, mi proyecto esta contenido en carpeta1/proyecto ahí tengo una pantalla que tiene la función File Upload, y quiero que los archivos subidos se guarden en carpeta2/archivos esto es posible? si es así, como lo haría???

    Agradezco su atención y ayuda.

    Saludos desde México D.F.

    • Hola Oscar, claro que sí es posible, en el método SaveAs le debes especificar la ruta en donde lo vas a guardar, en algunos casos te puede dar problemas de seguridad, en ese caso en la carpeta en la cual vas a guardar dale permisos al usuario con el cual ejecutas la aplicación (el del application pool si ya tienes el sitios en el IIS).

  13. Rafael Del Moral says:

    gracias por el aporte excelente.. estoy usando masterpage y no logro hacerlo funcionar. puse en masterpage

    y lo que tu comentas de programacion lo puse en las paginas donde uso el componente.

    ¿alguna sugerencia?

  14. Amigo, como estas? me puedes especificar que colocaste en la masterpage?

    Saludos.

  15. moises says:

    los enlaces estan caidos, no se puede descargar el ejemplo.

  16. Edgar Paredes says:

    Excelente aporte Cool!!!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Follow

Get every new post on this blog delivered to your Inbox.

Join other followers: