« Volver
in Visual Basic asp.net fileupload read.

Subir archivos con FileUpload.

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:

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.


Protected Sub btnSubir_Click(sender As Object, e As EventArgs) Handles btnSubir.Click
    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
End Sub

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



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.'); 
            returnfalse;
        } 
        //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 INCLUIDo
        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# !

comments powered by Disqus