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):
- Validar el tipo de archivo en el cliente.
- 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# !
