¿cómo pongo un campo file vacio desde javascript?

Axo · #1 (**permalink**) 13/12/2006, 05:02

Hola, estoy haciendo un formulario y cuando le doy a validar me envia los datos validar(this); a la funcion valiudar, en ella quiero hacer que si la foto no es JPG se ponga el campo de examinar (File) vacio... ¿Como lo podría hacer?

caricatos · #2 (**permalink**) 13/12/2006, 05:12

Hola:

Con javascript lo que podrías hacer es deshabilitarlo en el envío (o anular el envío)

Saludos

Axo · #3 (**permalink**) 13/12/2006, 05:15

Cita:

Iniciado por caricatos

Hola:

Con javascript lo que podrías hacer es deshabilitarlo en el envío (o anular el envío)

Saludos

claro, pero ademas de esto quiero que se borre el campo de file y lo vacie !

caricatos · #4 (**permalink**) 13/12/2006, 05:31

Hola:

Con explorer he probado esto:

Código:

<html>
	<head>
		<title>
			prueba
		</title>
		<script type="text/javascript">
function valida(f) {
if (f.form.jpg.value.substr(f.form.jpg.value.length - 3).toUpperCase() == "JPG")
 alert("Ok")
else
{
 alert("NO");
 ff = f.form.jpg;
 fff = ff.cloneNode(true);
 f.form.appendChild(fff);
 f.form.removeChild(ff);
}
}
		</script>
	</head>
	<body >
<form action="" method="get" name="f">
<input type="file" name="jpg" />
<br />
<button onclick="valida(this)" />valida</button>
</form>
	</body>
</html>

Se trata de borrar el nodo previamente duplicado...

Pruébalo y nos cuentas.

Saludos

caricatos · #5 (**permalink**) 13/12/2006, 05:48

Hola:

Acabo de probar lo mismo en firefox, y hay que rotacar algunas cosillas...
Los botones son del tipo submit, así que debería ser <button type="button"...

La inserción habría que hacerla con insertBefore (para que no se desacomode) y al valúe habría que reinicializarlo...

Código:

 alert("NO");
 ff = f.form.jpg;
 fff = ff.cloneNode(true);
 fff.value = "";
 f.form.insertBefore(fff, ff.nextSibling);
 f.form.removeChild(ff);

Saludos

Axo · #6 (**permalink**) 13/12/2006, 07:20

hola parece que funciona muchas gracias pero no comprendo la parte de codigo esta:

Código HTML:

 ff = f.form.jpg;
 fff = ff.cloneNode(true);
 fff.value = "";
 f.form.insertBefore(fff, ff.nextSibling);
 f.form.removeChild(ff);

el ff =
el fff = no lo entiendo :s

Axo · #7 (**permalink**) 13/12/2006, 07:21

por cierto muchas gracias q con las prisas no telo dije !!

caricatos · #8 (**permalink**) 13/12/2006, 08:28

Cita:

Iniciado por Axo

hola parece que funciona muchas gracias pero no comprendo la parte de codigo esta:

Código HTML:

 ff = f.form.jpg;
 fff = ff.cloneNode(true);
 fff.value = "";
 f.form.insertBefore(fff, ff.nextSibling);
 f.form.removeChild(ff);

el ff =
el fff = no lo entiendo :s

Hola:

Trataré de darte una explicación simplificada...

Código HTML:

 ff = f.form.jpg; // ff = campo file
 fff = ff.cloneNode(true); // fff = copia del campo file
 fff.value = ""; // copia con value inicializado
 f.form.insertBefore(fff, ff.nextSibling); // insertamos copia
 f.form.removeChild(ff); // borramos campo

Saludos

Axo · #9 (**permalink**) 13/12/2006, 10:21

Aaaaaaaaaah lo que estas haciendo es clonar el campo (poner y quitar el examinar) y es por ello que tienes que clonarlo... creo que ya lo pille !

Venga, ya te digo si me sirvio un saludo y muuuuuchas gracias amigito !

Axo · #10 (**permalink**) 13/12/2006, 10:37

Bueno ahora surge otro problema... para cuando son varios examinar en forma de arrai, ejemplo:

<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)"/>

¿Como sería? Es que no hay manera.. ni con gelenmentBY ni nada....

caricatos · #11 (**permalink**) 13/12/2006, 11:39

Hola otra vez:

No sé como lo procesas luego, pero con php no deberías poner el índice dentro de los corchetes en los nombres... de todos modos, con pocos cambios funciona...

Código:

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);}
}

Esta vez solo lo probé en firefox.

Saludos

Axo · #12 (**permalink**) 13/12/2006, 12:49

vale, me va perfecto tanto en IE como en el EXPLORE ahora... cuando meto en el fomulario, en cada campo de archivo (file) lo llamo: onchange="valida(this)" me pone error de "Argumento No valido" Linea 18 Car 2

La linea 18 seria esta:

Código HTML:

 f.form.insertBefore(fff, siguiente);

Que es lo que puede afectar? Estoy reduciendo todo el codigo de la pagina a lo mas simple posible pero ni aun asi...

Axo · #13 (**permalink**) 13/12/2006, 12:51

Se me olvidaba... lo que si me hace es crearme otro campo filex al final del formulario. Me va todo menos cuando tiene que borrar la ruta del archivo... eso no lo hace y da error.

caricatos · #14 (**permalink**) 13/12/2006, 13:17

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

Axo · #15 (**permalink**) 13/12/2006, 13:28

Puff no me va... si lo hago en html tal y como me lo pones tu si.... despues lo meto en la página los type file y el javascript y nada.... no me va... me da ese error.

caricatos · #16 (**permalink**) 13/12/2006, 13:36

Hola:

Pues ya es imposible ayudarte, ya que evidentemente tienes algún conflicto con otros scripts... o pones el código mal... ¿no tendrás otro método con el mismo nombre...

?

¿Sin la validación tienes otros problemas...?
¿Los inputs están en un formulario...?

Te recomiendo que hagas esos chequeos, porque sin dudas el código funciona (probado en 3 navegadores)

Saludos

Axo · #17 (**permalink**) 13/12/2006, 13:46

Estoy en ello, si lo hago en html sin tocar codigo... me va perfecto pero ya cuano trato de incorporarlo me da fallo..

De todas formas ya me va :D lo he hecho el formulario que tenia desde cero y parece que va... pero estoy intentando averiguar el fallo al que es debido... ya hice todo ese proceso mucho antes de postear... es algo muy raro sinceramente el javascript y yo no acabamos de llevarnos del todo bien... :( si doy con el fallo q me daba ya te comento !

Muchas gracias por tu ayuda

caricatos · #18 (**permalink**) 13/12/2006, 13:55

Cita:

Iniciado por Axo

Estoy en ello, si lo hago en html sin tocar codigo... me va perfecto pero ya cuano trato de incorporarlo me da fallo..

De todas formas ya me va :D lo he hecho el formulario que tenia desde cero y parece que va... pero estoy intentando averiguar el fallo al que es debido... ya hice todo ese proceso mucho antes de postear... es algo muy raro sinceramente el javascript y yo no acabamos de llevarnos del todo bien... :( si doy con el fallo q me daba ya te comento !

Muchas gracias por tu ayuda

Bueno, lo dejamos pendiente y me alegro que ya te funcione... y si los archivos piensas procesarlos como array con php acuérdate de que los corchetes deben estar vacíos... pero eso ya es otro tema y de otro foro.

Saludos

Axo · #19 (**permalink**) 13/12/2006, 14:00

Cita:

Iniciado por caricatos

Bueno, lo dejamos pendiente y me alegro que ya te funcione... y si los archivos piensas procesarlos como array con php acuérdate de que los corchetes deben estar vacíos... pero eso ya es otro tema y de otro foro.

Saludos

Hola, si el procesado por php no es el problema eso lo hace bien

pero gracias por la anotación. Sigo buscando el error pero no lo encuentro... esto es la... jaja ahora que me va bien busco que me vaya mal en fin...

Creo que lo voy a dejar de momento, supongo que sera alguna "tonteria". Limpie codigo, deje solo y exclusivamente el que voy a necesitar y va todo correcto

.

En fin muchisimas gracias de nuevo por todo !!

Saludos.

lloga · #20 (**permalink**) 12/04/2007, 11:05

hola, este es un post antiguo pero justo me encontre con este problema y la solucion que le di es esta:

el campo inserto dentro de un simple div:

Código:

<DIV id=capaarchivo ><input name="archivo" type="file" id="archivo"></DIV>

y lo borro con esta funcion javascript que invoco de donde sea necesario (en mi caso desde varios botones):

Código:

function fncBorracampofile() 
{
	capa = window.capaarchivo;
	varHTML = '';
	capa.innerHTML = varHTML;
	varHTML += '<input name="archivo" type="file" id="archivo">';
	capa.innerHTML = varHTML;
}

como ven lo que hago es eliminar y crear el campo nuevamente dentro del div con ayuda de javascript.

leopinzon · #21 (**permalink**) 14/01/2009, 11:12

utilizando jquery para que te funcione en cualquier navegador:

$('nombrecampofile').attr('value',"");

caricatos · #22 (**permalink**) 14/01/2009, 11:30

Hola:

Temas viejísimos y solucionados serán cerrados...

Saludos