Probá con esto:
Código:
function validarExtension (archivo) {
var nombreArchivo = archivo.value;
var posicionPunto = nombreArchivo.lastIndexOf(".");
var extensionOriginal = nombreArchivo.substring(posicionPunto);
var extension = extensionOriginal.toLowerCase();
if (extension != ".jpg" && extension != ".gif" && extension != ".jpeg") {
alert("la extensión no es válida");
return false;
}
return true;
}
Al form agregale onSubmit="validarExtension(this.archivo);"
Al input file, llamalo archivo -- o el nombre que quieras, pero entonces cambiá el parámetro cuando llamás a la función al enviar el form (onSubmit).
Básicamente, lo que hace esta función es tomar el nombre del archivo, buscar el último punto y obtener así la extensión. La pasa después a minúsculas, por si el archivo se llamar "algo.JPG" en vez de ".jpg". Y después, simplemente se fija si la extensión es ".gif", ".jpg" o ".jpeg". Si no es, no envía el formulario y muestra un mensaje de error. En caso de que sea válida, manda el form.
Algo muy importante a tener en cuenta, que vale en general para todo lo que sea validación del lado del cliente -- léase, con JS-- y especialmente si se trata de subir archivos al servidor. Hacé de cuenta que no estás validando nada. La validación en JS es simplemente algo que hacés para hacerle las cosas más fáciles a un usuario, para que no pierda tiempo esperando que se suba un archivo que después va a "rebotar" porque no está permitido, para darle un pista sobre cuál puede ser el error que está cometiendo, etc. Pero como validación en sí, vale poco y nada. Siempre validá del lado del servidor (con php, asp o lo que fuera), porque todo lo que está del lado del cliente es fácilmente manipulable (y está fuera de tu control). O sea: si querés que a tu server sólo suban .jpg's y .gif's asegurate de que no se suba ningún otro archivo con php. No confíes en JS, porque se trampea muy fácil.
Suerte
Califa