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

  • Por
Presentamos un script Javascript para realizar la validación de la extensión de un archivo antes de realizar un upload.
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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

vixtorino_lastarria

05/7/2006
buen aporte,muchas gracias
pero tengo una inquietud relacionada

¿¿sabes como puedo restringir el tamaño del archivo a subir??

hagasusitio

27/11/2009
Tengo una duda
Hola, disculpen si no estoy posteando en el lugar correcto, pero tengo una gran duda y queria saber si alguien me puede ayudar o vender un curso útil para lo que quiero lograr.

1- Ya tengo el sistema de upload a mi server y ya subo los archivos..
pero mi gran pregunta es: como le hago para que cuando subo el archivo, se me genere la dirección url del archivo recien subido

es decir: http://www.miweb.com/miimagen.gif

Y la otra tran pregunta es como le hago, para agregar una extencion al archivo en caso que alla otro con el mismo nombre.

agradeceria cualquier ayuda, gracias

ISC

05/1/2010
Como bajar archivos con JSP
Hola disculpen este articulo es muy bueno, pero me gustaria saber, como es q a mi pagina subo un archivo .doc (por ejemplo) y el Cliente lo puede descargar. Si alguin saber por favor hagamelo saber gracias, y sigan haciendo articulos como estos.

Hugo Leon

10/3/2010
Felicidades!
Es un excelente post, muy claro y fácil de entender... Después de 4 años casi, sigue ayudando :)

Un saludo. Gran sitio.

Laura

15/7/2010
Consulta
Saludos, estoy usando fireworks para crear botones con menus desplegables,

luego exporte de fireworks a dreamweaver el trabajo realizado......

la cuestion esta que en la vista previa sale perfecto los efectos del menu despegable..... pero a la hora de subir todo al hosting el menu despegable no sale.... que podria ser???? estare omitiendo algun codigo, imagen... tengo como 3 dias intentando pero no me sale nada.... te agradeceria me ayudes o si gustas te envio el link de lo que subi para que le heches un ojito... Gracias. ;)

Henry Jimenez

19/11/2010
Me salvo la vida
Excelente articulo para nosotros los principiantes. Hombre Miguel, que utilidad recomiendas para programar, yo trabajo con el Netbeans, que me parece excelente.

Me gustaria saber si existe una mejor a si sea comercial.

Gracias, aunque un poco tarde, pero me sirvió muchísimo

raul

14/1/2011
Gracias
Me sirvio bastante muchas gracias

Juan Perez

13/5/2011
Gracias
Me ha sido de mucha tu articulo, yo tenia una validacion en php pero no sabia como tomar la extension del archivo en javascript

Saludos

erika

29/5/2011
pregunta
El codigo me funciona bien pero cuando hace el alert, sea bueno o de error, hace el submit de todas manera y la idea es que vuelva al formulario, como puedo hacer eso?

Daniel González

11/8/2011
Bien!!
Muchas gracias!!! Ha sido de muchísima ayuda!!!
Espero que todo vaya muy bien!!

Jose Calderon

09/11/2011
Excelente aporte
Muchas gracias, estuvo excelente.

Saludos

Mentado

05/1/2012
Muy bueno..
Se que el articulo ya tiene su tiempo pero esta muy bien explicado, ya tenia tiempo buscando algo asi.. Gracias

marco riquelme

26/8/2013
Gracias
Gracias amigo, me sirvió bastante.

camilo

12/2/2014
Gracias
Muy útil, me ayudo a mejorar mi programa

FranciscoCts

22/3/2014
Sí envía el formulario
Sí me muestra el mensaje de los formatos, pero al momento que doy aceptar me guarda el vídeo en la base de datos, cómo puedo solucionar el error?

ronel lezama

07/10/2014
Excelente !
Despues de tantos años y esta funsión sigue perdurando en el tiempo. Muy buen aporte.

Felipe

11/12/2014
Gracias
Excelente código, simple y claro. Me sirvió mucho para validar los archivos que se suben. GRACIAS!!!

Hernan

25/6/2015
Gracias
Muchas gracias por el Código funciona perfectamente.

david

11/10/2015
dudda
quisiera saber en java como comprobar los tipos de archivo que hay cuando examino una careta y la seleecione,
y al recibir el contenido envie un mensaje en donde diga
tiene 3 archivos con extencion docx.
tiene 2 archivos con extencion xlsx.

Avril

02/5/2016
GRACIAS
Buenas tardes, fue de mucha ayuda te lo agradezco.

saludos.

JhonM

03/2/2017
javascript validación
Muchas gracias fue de mucha ayuda

jeniffer claveria

13/1/2018
Agradeimientos
Gracias n_n