Hola:
Un código completo que funciona en explorer y en firefox:
Código:
<html>
<head>
<title>
prueba
</title>
<script type="text/javascript">
function valida(f) {
if (f.value.substr(f.value.length - 3).toUpperCase() == "JPG")
alert("Ok")
else
{
alert("No");
siguiente = f.nextSibling;
fff = f.cloneNode(true);
fff.value = "";
f.form.insertBefore(fff, siguiente);
f.form.removeChild(f);
}
}
</script>
</head>
<body >
<form action="" method="get" name="f">
<input type="file" name="jpg[]" onChange="valida(this)"/>
<input type="file" name="jpg[]" onChange="valida(this)"/>
<input type="file" name="jpg[]" onChange="valida(this)"/>
<input type="file" name="jpg[]" onChange="valida(this)"/>
</form>
</body>
</html>
Pero la mala noticia es que en opera no borra los datos (duplica el campo con los datos incluídos)...
pero la buena es que se puede crear uno nuevo copiando los atributos...
Código:
<html>
<head>
<title>
prueba
</title>
<script type="text/javascript">
function valida(f) {
if (f.value.substr(f.value.length - 3).toUpperCase() == "JPG")
alert("Ok")
else
{
alert("No");
siguiente = f.nextSibling;
fff = document.createElement("input");
fff.type = "file";
fff.name = f.name;
fff.onchange = f.onchange;
// fff = f.cloneNode(false);
fff.value = "";
f.form.insertBefore(fff, siguiente);
f.form.removeChild(f);
// fff.value = "";
}
}
</script>
</head>
<body >
<form action="" method="get" name="f">
<input type="file" name="jpg[0]" onChange="valida(this)"/>
<input type="file" name="jpg[1]" onChange="valida(this)"/>
<input type="file" name="jpg[2]" onChange="valida(this)"/>
<input type="file" name="jpg[3]" onChange="valida(this)"/>
</form>
</body>
</html>
Puedes probarlo directamente aquí:
Probador de scripts
Saludos
