Subir archivos con FileUpload

Posted on Actualizado enn


Una funcionalidad recurrente en un desarrollo web es la necesidad de permitirle al usuario cargar archivos, para esta tarea asp.net ofrece un control llamado FileUpload, este control abre una ventana en al cual el usuario selecciona el archivo, pero esto no es suficiente, también se debe disponer de un botón generalmente que permita realizar la subida de dicho archivo al servidor.

Un punto importante es que a diferencia de las aplicaciones de escritorio en donde el componente OpenFileDialog permitía filtrar los tipos de archivos a seleccionar con el FileUpload esto no es posible, el usuario podrá seleccionar el tipo de archivo que desee.

El punto anterior puede traernos bastantes problemas, para lo cual tenemos dos opciones (aconsejo utilizarlas ambas):

  1. Validar el tipo de archivo en el cliente.
  2. Validar el tipo de archivo en el servidor.

Vamos a revisar como realizar ambas validaciones, la interfaz algo sencilla pero que servirá para realizar el ejemplo es:

Tenemos dos grupos, el primero realizará validación en el servidor y el segundo en el cliente, para el ejemplo se va a permitir subir solo imágenes, para luego ser mostrada por pantalla.

1. Validación en el servidor:

El código para realizar la validación en el servidor es:

        Dim sExt As String = String.Empty
        Dim sName As String = String.Empty
 
        imgSubida.Width = 0
        imgSubida.Width = 0
        imgSubida.ImageUrl = ""
 
        If uploadFile.HasFile Then
            sName = uploadFile.FileName
            sExt = Path.GetExtension(sName)
 
            If ValidaExtension(sExt) Then
                uploadFile.SaveAs(MapPath("~/images/" & sName))
                imgSubida.Width = 300
                imgSubida.Width = 300
                imgSubida.ImageUrl = "/images/" & sName
                lblMensaje.Text = "Archivo cargado correctamente."
            Else
                lblMensaje.Text = "El archivo no es de tipo imagen."
            End If
        Else
            lblMensaje.Text = "Seleccione el archivo que desea subir."
        End If
    Private Function ValidaExtension(ByVal sExtension As String) As Boolean
        Select Case sExtension
            Case ".jpg", ".jpeg", ".png", ".gif", ".bmp"
                Return True
            Case Else
                Return False
        End Select
    End Function

Se declaran dos variables, una va a tener el nombre del archivo y la otra la extensión del archivo, luego con la propiedad booleana uploadFile.HasFile validamos que el control si tenga un archivo, obtenemos el nombre del archivo con uploadFile.FileName,este obtiene exclusivamente el nombre con la extensión del archivo, si usamos uploadFile.PostedFile.FileName obtenemos la ruta completa y finalmente la extensión se obtiene con la función GetExtension() de la clase Path que pertenece al espacio de nombres System.IO.

Luego con la función ValidaExtension() se valida que la extensión del archivo sea correcta, de ser así devuelve true de lo contrario false.

Si la validación anterior ha sido correcta, se hace uso del método SaveAs del FileUpload, y se guarda la imagen en la carpeta images de la estructura del sitio, y finalmente la imagen es cargada al control image.

2. Validación en el cliente:

El código para realizar la validación en el cliente es:

$(function () {
    $("#<% = btnSubir2.ClientID %>").click(function () {
        var file = document.getElementById('<% = uploadFile2.ClientID %>').value;
        if (file == null || file == '') {
            alert('Seleccione el archivo a subir.');
            return false;
        }
        //DEFINE UN ARRAY CON LAS EXTENSIONES DE ARCHIVOS VALIDAS
        var extArray = new Array(".jpg", ".jpeg", ".bmp", ".png", ".gif");
        //SE EXTRAE LA EXTENSION DEL ARCHIVO CON EL PUNTO INCLUIDP 
        var ext = file.slice(file.indexOf(".")).toLowerCase();
 
        //SE RECORRE EL ARRAY PARA VERIFICAR SI LA EXTENSSION DEL ARCHIVO ESTA DEFINIDA 
        //EN EL ARRAY QUE CONTIENE LAS EXTENSIONES VALIDAS
        for (var i = 0; i < extArray.length; i++) {
            if (extArray[i] == ext) {
                alert("El archivo SI es una imagen.");
                return true;
            }
        }
        alert("El archivo NO es una imagen");
        return false;
    })
})

Primero con jQuery manejamos el evento clic del botón btnSubir2, en la variable file traemos el valor que tiene el fileupload, esto para poder verificar que se haya seleccionado un archivo.

Se define un array con las extensiones permitidas de los archivos a subir, luego en la variable ext se guarde la extensión del archivo seleccionado (recuerda q se incluye el punto) y finalmente con un ciclo for se recorre el array para revisar si la extensión del archivo se encuentra en algún item del array definido anteriormente.

Un punto importante acá es que el control FileUpload no es totalmente compatible con el UpdatePanel, por lo cual se tendrá que hacer se otro control del cual hablaré en los próximos artículos, además veremos como utilizar los plugin de jQuery para realizar la subida de archivos.

Les dejo el código del ejemplo en VB y C#.

Ejemplo en VB !

Ejemplo en C# !

25 comentarios sobre “Subir archivos con FileUpload

    […] Todo en Visual Basic.Net InicioAcerca de « Subir archivos con FileUpload […]

    […] 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 […]

    misaeljuvenal escribió:
    10/18/2011 en 11:00

    justo lo que buscaba, lo probare.. gracias por compartir…;)

    Albert escribió:
    12/21/2011 en 17:32

    Tendrias todo el codigo sobre como por medio de fileupload guardar los archivos en una base de datos oracle y como puedo actualizar, modificar y eliminar esos archivos por mediod e asp.net … gracias por tus aportes me han ayudado mucho … espero tu respuesta, saludos!

    Sergio escribió:
    06/23/2012 en 10:55

    Hola e buscado en muchos sitios como subir una imagen por fileupload pero no a mi sitio , sino a un ftp q tengo alojado en otro hosting con credenciales de usuario y no he encontrado nada, se nota que manejas muy bien este control, por favor podrias realizar un articulo de subir a ftp , es q el principal problema en q el fileupload no toma toda la ruta del archivo ejm c\archivos de programa\images\miimagen.jpg entonces creo yo q se podria subir los FileBytes de la imagen pero no he encontrado nada , por fa ayuda !!!!!

    […] de ASP.NET, esto se dio ya que tenia un post en el cual mostraba como poder usar ese control (mira el post acá), así que en esta entrada deseo responder a esa […]

    […] de ASP.NET, esto se dio ya que tenia un post en el cual mostraba como poder usar ese control (mira el post acá), así que en esta entrada deseo responder a esa […]

    jrondon escribió:
    09/23/2012 en 18:15

    el codigo esta cheveres pero veo que tiene algo que no me cuadra.. la imagen sube de lo mas bien.. pero si en llegado caso el formulario da un erros sube la imagen igual.. creo que eso no se deberia no?… es mi pregunta como nuevo en esta materia.. hay una forma de acomodar esto…

      Julio Avellaneda respondido:
      09/25/2012 en 08:26

      Hola Jrondon, lo que pasa es q en el ejemplo solo esoty validando el tema de subir, sin tener en cuenta que sea un formulario completo, en ese caso lo que podrias hacer es primero realizar el guardado de los demás campos del formulario, y si esa operación es correcta ahi si lanzar el guardado de la imágen, pero es un manejo más de lógica de tu aplicación.

      Saludos

    murel escribió:
    10/22/2012 en 13:51

    Buenas gente: Intento subir un archivo de 600 MB con este control y a los pocos segundos de subir recarga la página y me envía al index de mi sitio, ocurre en IE. En FF funciona bien. Le agregué el tag en el Web.config pero por mas que juego con los valores siempre sucede lo mismo. Alguna sugerencia?
    Gracias.

    Saludos

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

      Hola, nunca he probado sbir un archivo tan grande, prueba usando un try-catch para ver si puedes capturar el error, yo lo voy a revisar con un archivo de ese tamaño.

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

        Es que no llega al lado del servidor y no se como puedo catcherarlo del lado cliente

    Diego escribió:
    02/11/2013 en 21:00

    Y si subo una iso con extencion jpg (miimagen.iso.jpg) funcionan las validaciones?

      Julio Avellaneda respondido:
      03/12/2013 en 09:25

      hola amigo, inicialmente creeria que no funcionarian, al menos la del lado del cliente, has probado? lo voy a revisar y te cuento

      Fer escribió:
      06/05/2013 en 12:53

      La extension formal de un archivo es la final…
      Aunque pongas Archivo.iso.jpg va a ser una imagen jpg.

    Fer escribió:
    06/05/2013 en 12:51

    Gracias, esta bien completo esto, pero les recomiendo que los que quieran aprender hagan lo basico primero sin tantas validaciones para que no se enreden…

    Diego: La extension formal de un archivo es la final…
    Aunque pongas Archivo.iso.jpg va a ser una imagen jpg.

    Saludos!

    dfpc escribió:
    06/25/2013 en 23:10

    no funciona si utilizo update panel como puedo resolverlo

      Julio Avellaneda respondido:
      06/26/2013 en 00:28

      Amigo, el fileupload no es compatible con el uploadpanel, en tal caso puedes usar el fileupload que brinda el Ajax control toolkit (https://julitogtu.wordpress.com/2011/05/02/fileupload-ajaxcontroltoolkit/) o usar un control de terceros compatible pero será prácticamente igual que el del control toolkit, si quieres seguir usando el file upload normal debes forzar un postback

        toni escribió:
        09/06/2013 en 01:58

        ¿como forzar un postback?
        No consigo que funcione. El caso es que mis fileuploads no están en updatepanel tan solo en una pagina que los contiene, por tanto con scriptmanager. Quería probar el postback pero no lo consigo.

        Julio Avellaneda respondido:
        09/23/2013 en 10:27

        Hola Toni, desde js puedes hacer un __dopostback.. o puedes tambien trabajar con el evento change del input que te carga el archivo y generar alli el postback.

        Saludos.

    Henry Salvash escribió:
    05/22/2014 en 11:23

    Hola amigos de este sitio quisiera que activen las descargas de los ejemplos mencionados
    le estaré agradecido.
    saludos

Responder

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