FileUpload con jQuery y ASP.NET

Posted on Actualizado enn


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

32 comentarios en “FileUpload con jQuery y ASP.NET

    PP escribió:
    05/26/2011 en 16:12

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

    rocio escribió:
    07/04/2011 en 09:28

    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

      Julio Avellaneda respondido:
      07/04/2011 en 20:44

      Hola, de casualidad estas usando algun updatepanel? ademas dos opcioens mas:
      1. coloca un try-catch para manejar el error
      2. verifica q la variable files si tenga datos (esto puede deberse si usas algun updatepanel), pq si se usa y es nothing te marcara error, avisame !

      Marticore escribió:
      08/23/2011 en 10:11

      Buenas, como funcionaria si estuviera usando un updatepanel en otra parte de mi documento?, porqu een la parte de

      HttpFileCollection files = Request.Files;
      for (int i = 0; i 0)
      {

      no encuentra nada :s

      gracias.

    mariobot escribió:
    11/01/2011 en 11:29

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

    jesusalexis escribió:
    06/14/2012 en 01:44

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

      Julio Avellaneda respondido:
      06/14/2012 en 10:39

      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.

    murel escribió:
    10/22/2012 en 14:47

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

      Julio Avellaneda respondido:
      10/22/2012 en 15:04

      Hola, alli se define el framework con el cual estas trabajando.

        murel escribió:
        10/22/2012 en 15:12

        Defino el 3.5 pero no me funciona.

    Carlos escribió:
    10/22/2012 en 14:59

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

    Saludos

      Julio Avellaneda respondido:
      10/22/2012 en 15:06

      Hola Carlos, la verdad no lo he probado, dejame darle un ojo en estos días

    murel escribió:
    10/22/2012 en 15:01

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

      Julio Avellaneda respondido:
      10/22/2012 en 15:05

      Hola, no creo q el error sea por eso, el usa class solo permite definir la clase css que se va a utilizar, inlcuos es posible asignar nombres de clase q no existan, puede que te lo marque como advertencia pero no como error.

        murel escribió:
        10/22/2012 en 15:09

        Tenés razón, no miré correctamente. Gracias

        Julio Avellaneda respondido:
        10/22/2012 en 15:11

        Un gusto amigo, cualquier cosa con gusto!

    Edward Ocando escribió:
    12/30/2012 en 19:21

    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….

      Julio Avellaneda respondido:
      12/30/2012 en 19:31

      Edward, si realizas la descarga del ejemplo verás que referencio dos scripts:

      el multifle.js permite seleccionar varios archivos.

    Abel Amaro Julian escribió:
    01/08/2013 en 14:46

    Muchs gracias me sirvio de mucho =)

    Arturo Suarez escribió:
    03/08/2013 en 11:14

    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.

      Julio Avellaneda respondido:
      03/12/2013 en 08:59

      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.

    Jaume Estrany Mas escribió:
    06/25/2013 en 09:32

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

      Julio Avellaneda respondido:
      06/26/2013 en 08:16

      Hola, el control del tipo de archivo lo realizo en la definición del fileupload, mira la propiedad accept.

    Oscar escribió:
    08/20/2013 en 14:19

    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.

      Julio Avellaneda respondido:
      08/24/2013 en 17:06

      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).

    Rafael Del Moral escribió:
    11/01/2013 en 18:39

    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?

    Julio Avellaneda respondido:
    11/02/2013 en 10:59

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

    Saludos.

    moises escribió:
    02/25/2014 en 13:44

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

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s