Validar un fileupload de asp.net con JQuery


Validar un fileupload de asp.net con JQuery | jazdian

phone

Primeramente, lo que se va a validar en el control asp fileupload es que tenga un archivo seleccionado 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 UseSubmitBehavior  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 función devuelve un false se detiene el postBack del servidor y ya no se ejecuta el evento onclick() del servidor. Si es true 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 vació 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 extensió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 extensión en el arreglo
      //TiposArchivoValido entonces la variable ArchivoValido 
      //seguirá 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 función
         //devuelve un false no se ejecuta el onclick() en servidor
         $('#MsgError').html('Tipo de archivo NO valido. ' + ext);
         return false;
       }
   }
};

Eso es todo.

Saludos.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *