[SOLUCIONADO] Problema con los campos file

gbmcarlos · #1 (**permalink**) 04/02/2013, 13:46

Buenas, llevo dos días con el mismo problema y buscando la solución por todas partes, así que me veo obligado a pedir ayuda.

El panorama es el siguiente:

Tengo un iframe donde hay un campo file:

Código HTML:

Ver original<iframe name='iframe' id='iframe' src='upload.php' >
    <form id='formUpload' action='upload.php' method='post' enctype='multipart/form-data' target='iframe'>
        <div id='capaFiles'>
            <input type="file" name="userfile">
        </div>
    </form>
</iframe>

Y en Javascript una funcion que hace lo siguiente:

Código Javascript:

Ver originalfunction addFile() {
 
    document.getElementById("iframe").contentWindow.document.getElementById("capaFiles").innerHTML += "<input  name='userfile[]' type='file'>";
 
}

Y el problema que tengo es que, incomprensiblemente, al añadir un nuevo input file a la capa, se borra el value del que había anteriormente, es decir, pierde la ruta del archivo seleccionado. Y si hay más de un input file y se añade otro, se pierde el value todos los anteriores.

He conseguido identificar el problema al máximo detalle posible, pero al llegar aquí, ya me he quedado flipando.

Alguien sabría decirme qué es lo que pasa?

Gracias de antemano.

David · #2 (**permalink**) 04/02/2013, 13:55

No uses innerHTML, prueba así:

Código Javascript:

Ver originalvar newfile = document.createElement("input");
newfile.name = "userfile[]";
newfile.type = "file";
document.getElementById("iframe").contentWindow.document.getElementById("capaFiles").appendChild(newfile);

gbmcarlos · #3 (**permalink**) 04/02/2013, 13:57

Durante un tiempo estuve usando appendChild para cosas como estas, pero dejé de usarlo, aparte de porque es mas engorroso, creo que es menos compatible con diferentes navegadores.

Aún así, lo prueba ahora mismo.

gbmcarlos · #4 (**permalink**) 04/02/2013, 14:16

Bueno, me funciona a medias, ya que no consigo asignarle bien un evento onChange, un que antes ya tenia y funcionaba perfectamente.

Aún así, muchas gracias, me ha servido de mucho.

PD: Por pura curiosidad. ¿Porque con innerHTML me borraba el value de los anteriores?

David · #5 (**permalink**) 04/02/2013, 20:13

¿Cómo intentas asignarle el listener del evento?

Porque al agregar algo a la propiedad innerHTML se vuelve a procesar todo el contenido.

emprear · #6 (**permalink**) 04/02/2013, 22:30

Aqui una variante
el parent

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
function agregar(){
window.destino.agrega_file();
}
//]]>
</script>
</head>
<body>
<div><button onclick="agregar()">agregar</button></div>
<iframe src="file.html" width="400" height="400" name="destino" id="destino"></iframe>
</body>
</html>

el iframe (file.html)

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
function agrega_file(){
var contenido = document.getElementById('campos_file').innerHTML;
document.getElementById('campos_file').innerHTML = contenido + "<input type='file' name='file[]' onchange='otrafunc();'\/><\/br>";
document.getElementById('procesar').disabled = false;
}
function otrafunc(){
alert('onchange desde los input file');
}
//]]>
</script>
</head>
<body>
<form action="respuesta.html">
<div id="campos_file">
</div>
<input type="submit" name="procesar" id="procesar" disabled="disabled" />
</form>
</body>
</html>

aunque no veo muy práctico agregar los campos file desde el parent, por que no hacerlo desde el mismo iframe (que a lo mejor ni es necesario). Es cuestión dever el conjunto de tu aplicación
SAludos

gbmcarlos · #7 (**permalink**) 05/02/2013, 10:11

Respecto a la pregunta de David, agrego el evento onCgange así:

Código Javascript:

Ver originalnewfile.onchange = function(){nombreArchivo(this.value,this.id);};

Me reconoce el evento, pero es como si no pasara los parámetros correctamente. Antes tenia un elemento con el atributo onChange="nombreArchivo(this.value,this.id)", y además he comprobado los parámetros que pasa y son correctos.

Y respecto a emprear, como ha comentado David, al cambiar la propiedad innerHTML, se procesa de nuevo todo el contenido, así que ya no me sirve. Y añado los input file desde el parent, para poder mostrar botones personalizados, y poder enviar el formulario (que esta en upload.php) a upload.php, recursivamente.

Pero bueno, el problema que tengo ahora con el evento onChange, ya debe de ser un problema de lógica, ya buscare la solución por mi cuenta.

Muchas gracias a ambos.

gbmcarlos · #8 (**permalink**) 05/02/2013, 10:31

¡Solucionado!

He añadido el evento onChange con setAtribute("onchange","nombreArchivo(this.value,t his.id)") y perfecto.

Si es que al final todo funciona mejor si se siguen los estándares...

David · #9 (**permalink**) 05/02/2013, 10:36

Yo probé asignar el evento onchange de esa manera y funcionó, así como obtener el value del elemento. Quizás sea el id que no estás asignando a la hora de crearlo.

Asignar el evento con setAttribute puede traerte problemas con algunos navegadores.