Validar la extensión de un archivo a subir con Javascript

En este artículo vamos a mostrar como validar la extensión de un archivo mediante Javascript. Tenemos un formulario con un campo file y cuando se va a enviar el archivo, se realiza una comprobación para ver si la extensión está entre las permitidas. Si lo estuviera, se realiza el envío del formulario para hacer el upload del fichero.

En este script sólo se realiza la comprobación de la extensión, en ningún caso la recepción del fichero y su almacenamiento en el servidor, pues con Javascript no podemos realizar esas acciones, ya que es un lenguaje que se ejecuta en el cliente y no tiene acceso al servidor para hacer un upload.

En este ejemplo vamos a definir un formulario con un campo file y un botón de enviar que llama a una función, que será encargada de comprobar si la extensión está permitida y submitir el formulario si todo es correcto. El formulario sería el siguiente:

<form method=post action="#" enctype="multipart/form-data">
<input type=file name="archivoupload">
<input type=button name="Submit" value="Enviar" onclick="comprueba_extension(this.form, this.form.archivoupload.value)">
</form>

Ahora veremos la función comprueba_extension() que recibe una referencia al formulario y la ruta del archivo que deseamos subir desde dentro de nuestro ordenador. La función realizará una serie de comprobaciones que veremos a continuación. El código será el siguiente:

function comprueba_extension(formulario, archivo) {
   extensiones_permitidas = new Array(".gif", ".jpg", ".doc", ".pdf");
   mierror = "";
   if (!archivo) {
      //Si no tengo archivo, es que no se ha seleccionado un archivo en el formulario
       mierror = "No has seleccionado ningún archivo";
   }else{
      //recupero la extensión de este nombre de archivo
      extension = (archivo.substring(archivo.lastIndexOf("."))).toLowerCase();
      //alert (extension);
      //compruebo si la extensión está entre las permitidas
      permitida = false;
      for (var i = 0; i < extensiones_permitidas.length; i++) {
         if (extensiones_permitidas[i] == extension) {
         permitida = true;
         break;
         }
      }
      if (!permitida) {
         mierror = "Comprueba la extensión de los archivos a subir. \nSólo se pueden subir archivos con extensiones: " + extensiones_permitidas.join();
       }else{
          //submito!
         alert ("Todo correcto. Voy a submitir el formulario.");
         formulario.submit();
         return 1;
       }
   }
   //si estoy aqui es que no se ha podido submitir
   alert (mierror);
   return 0;
}

Lo primero que hacemos es definir un array con las extensiones permitidas para hacer el upload. También definimos una variable llamada mierror, donde vamos a guardar el texto explicativo del error, si es que se produce.

Luego comprobamos si hemos recibido una ruta del archivo. Si no hay tal ruta, se define el error correspondiente "No has seleccionado ningún archivo". En caso contrario es que tenemos una ruta, con lo que vamos a buscar el nombre del archivo.

La ruta que podemos recibir puede tener una forma como esta:
C:\directorio\otro directorio\archivo.doc

De la ruta nos interesa obtener sólo la extensión del archivo. Por lo que vamos a obtener la parte que hay después del último punto. Esto se hace utilizando varios métodos de los objetos string de javascript:

extension = (archivo.substring(archivo.lastIndexOf("."))).toLowerCase();

Simplemente estamos seleccionado la parte del string que hay después del último punto. Y estamos pasándo la extensión a minúsculas, por si acaso estuviera escrita con mayúsculas.

A continuación, para comprobar si esta extensión está entre las permitidas hacemos un bucle for, que recorre todo el array de extensiones permitidas y las va comparando a la extensión que hemos recortado del nombre del archivo. En el momento que encuentra una coincidencia se sale del bucle y pone la variable boleana permitida a true. Si no encontrase coincidencias esa variable boleana quedaría como false.

Luego se comprueba la variable boleana permitida. Si está en false es que no se permite la extensión, entonces defino el correspondiente error. Si estaba a true es que la extensión figuraba entre las permitidas, entonces se envía el formulario y se sale de la función.

Al final de la función se muestra el posible error que se haya detectado. Sólo se mostrará el error si no se llegó a mandar el formulario, porque si se hubiera enviado, se habría salido anteriormente de la función.

Esperamos que esta validación haya sido de utilidad. Se puede ver en funcionamiento en una página aparte.