Validar un fileupload de asp.net con JQuery

Primeramente, lo que se va a validar en el fileupload es que tenga un archivo y los tipos de archivos permitidos. Les dejo el codigo HTML con los controles necesarios:

Un fileupload y un (en mi caso) ImageButton, puede ser un Button y un div.

<asp:FileUpload ID="FileUploadCirculares" runat="server" CssClass="TextBox"/>							<asp:ImageButton ID="ButtonGuardar" runat="server" ImageUrl="imgcont/btnCargaArchivo.gif" OnClientClick="if(ValidarFileUpload()== false) {return false};"       UseSubmitBehavior="false" onclick="ButtonGuardar_Click" />
<div id="MsgError">...</div>

El Evento OnClientClick() invoca una función de JQuery; y la propiedad UseSubmitBehevior  en falso para que de esta manera se pueda ejecutar en primer lugar la función de JQuery y si nos regresa falso la función detener el PostBack del servidor. Entonces como comentamos al principio se validará que el fileupload tenga un archivo y los tipos de archivos permitidos:

//Si la funcion devuelve un false se detiene el postBack del servidor
//y ya no se ejecuta el evento onclick() del servidor. Si es true 
//se entonces procede a ejecutar el código del servidor.  
function ValidarFileUpload() {
//el agregado ct100_ContentPlaceHolder1_ en el ID del control
//fileupload se le pone pues en mi caso el control está dentro
//de un ContentPlaceHolder de una MasterPage 
var tienearchivo = $("#ctl00_ContentPlaceHolder1_FileUpload").val();
//Si esta vacio la función retorna un false y se detiene el postback //del servidor y el evento del click del cliente
if (tienearchivo == null || tienearchivo == "") {
    $('#MsgError').html('Seleccione un archivo. ' + tienearchivo);
     return false;
}
else { 
// Si el fileupload tiene un archivo se valida el tipo 
var TiposArchivoValidos = ["doc", "docx", "xls", "xlsx", "ppt", "pptx", "pdf", "zip", "rar"];
//Extraemos la extención que es del punto a la derecha
var ext = tienearchivo.substring(tienearchivo.lastIndexOf('.') + 1).toLowerCase();
//Variable con valor inicial de falso
var ArchivoValido = false;
//Comparamos la extención del archivo recuperada con los tipos de 
//archivo válidos. Si se encuentra el tipo, ArchivoValido sera True
for (var i = 0; i < TiposArchivoValidos.length; i++) {
   if (ext == TiposArchivoValidos[i]) {
      ArchivoValido = true;
      break;
   }
}
//Si no se encuentra el tipo de extención en el arreglo
//TiposArchivoValido entonces la variable ArchivoValido 
//seguira en false.
if (ArchivoValido == true) {
//Si el tipo es valido mandamos mensaje en un DIV y la funcion
// retorna un true despues se ejecuta el onclick() en servidor.
   $('#MsgError').html('Tipo de archivo valido. ' + ext);
   return true;
}
else {
//Si el tipo no es valido se manda mensaje en un DIV y la funcion
//devuelve un false no se ejecuta el onclick() en servidor
   $('#MsgError').html('Tipo de archivo NO valido. ' + ext);
   return false;
}
}
};

Eso es todo.

Saludos

Anuncios

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