Código HTML:
<html>
<body>
<form>
<input type="file" id="i1" class="upfil" /><br /><br />
<input type="file" id="i2" class="upfil" /><br /><br />
<input type="file" id="i3" /><br /><br />
<input type="file" id="i4" /><br /><br />
<input type="file" id="i5" class="upfil" /><br /><br />
<input type="file" id="i6" /><br /><br />
<input type="file" id="i7" class="upfil" /><br /><br />
<input type="file" id="i8" class="upfil" /><br /><br />
<a href="#" onClick="seleccionar()">probar funcion</a>
</form>
<script type="text/javascript">
function seleccionar()
{
//selecciono todos los 'inputs'
var allinputs = document.getElementsByTagName("input");
//creo un array para almacenar solo los inputs que voy a utilizar
var inputs = new Array(); var j = 0; //La variable 'j' la utilizo como apuntador en el array 'input'
//recorro todos los inputs recogidos
for(i=0; i<allinputs.length; i++)
{
//extraigo los inputs con la clase especifica para subir archivos
if (allinputs[i].className == "upfil")
{
//aca realizo el paso de los inputs(si el input tiene una clase 'upfil' entonces los aparto en un array en limpio)
inputs[j] = allinputs[i];
j++; //incremento el apuntador para el proximo input a almacenar
}
}
comprobacion(inputs); //llamada a la funcion que comprueba los inputs en cuestion
}
function comprobacion(iarray)
{
for(m=0; m < iarray.length; m++) //recorro el array con los inputs
{
var cadena1 = iarray[m].value; //tomo el valor del primer input
var s = cadena1.lastIndexOf("."); //obtengo la posision del ultimo punto en la cadena(el que precede a la extencion)
var miarr = new Array("gif","png","jpeg","jpg"); //Declaro un array con las extensiones permitidas
for (i = 0; i < miarr.length; i++) //bucle en el que compruebo las extensiones permitidas
{
var charfind = cadena1.substr(s+1,4); //extraigo las ultimas 4 letras despues del punto (posision 's+1')
charfind = charfind.toLowerCase(); //convierto la extraccion a minisculas para evitar comprobaciones erroneas
if(charfind == miarr[i]) //compruebo la extencion obtenida con las permitidas
{
alert("Archivo "+(m+1)+" validado"); //si es correcta aviso que esta validado
iarray[m].style.border = 'inherit'; //limpio bordes por si es la segunda ejecucion
iarray[m].style.color = 'black'; //limpio el color de letra por si es la segunda ejecucion
break; //termino blucle
}
if(i == miarr.length - 1) //si se ha llegado a la ultima pasada en el bucle aviso que se ha introducido una extension erronea
{
iarray[m].style.border = '4px red solid'; //remarco el borde del elemento mal
iarray[m].style.color = 'red'; //remarco fuente del elemento malo
alert("Has introducido una extension erronea en archivo " + (m+1)); //envio alerta
}
}
}
}
</script>
</body>
</html> Con esto lo unico que te queda por hacer es buscar la manera de agregar la clase a los inputs para que te valide la funcion. Fijate si te sirve, si no vemos alguna otra alternativa que podria ser con jquery.