Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Problema con los campos file

Estas en el tema de Problema con los campos file en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 04/02/2013, 13:46
 
Fecha de Ingreso: noviembre-2012
Mensajes: 10
Antigüedad: 11 años, 7 meses
Puntos: 0
Problema con los campos file

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
  1. <iframe name='iframe' id='iframe' src='upload.php' >
  2.     <form id='formUpload' action='upload.php' method='post' enctype='multipart/form-data' target='iframe'>
  3.         <div id='capaFiles'>
  4.             <input type="file" name="userfile">
  5.         </div>
  6.     </form>

Y en Javascript una funcion que hace lo siguiente:

Código Javascript:
Ver original
  1. function addFile() {
  2.  
  3.     document.getElementById("iframe").contentWindow.document.getElementById("capaFiles").innerHTML += "<input  name='userfile[]' type='file'>";
  4.  
  5. }

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.
  #2 (permalink)  
Antiguo 04/02/2013, 13:55
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 19 años, 2 meses
Puntos: 839
Respuesta: Problema con los campos file

No uses innerHTML, prueba así:
Código Javascript:
Ver original
  1. var newfile = document.createElement("input");
  2. newfile.name = "userfile[]";
  3. newfile.type = "file";
  4. document.getElementById("iframe").contentWindow.document.getElementById("capaFiles").appendChild(newfile);
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #3 (permalink)  
Antiguo 04/02/2013, 13:57
 
Fecha de Ingreso: noviembre-2012
Mensajes: 10
Antigüedad: 11 años, 7 meses
Puntos: 0
Respuesta: Problema con los campos file

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.
  #4 (permalink)  
Antiguo 04/02/2013, 14:16
 
Fecha de Ingreso: noviembre-2012
Mensajes: 10
Antigüedad: 11 años, 7 meses
Puntos: 0
Respuesta: Problema con los campos file

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?
  #5 (permalink)  
Antiguo 04/02/2013, 20:13
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 19 años, 2 meses
Puntos: 839
Respuesta: Problema con los campos file

¿Cómo intentas asignarle el listener del evento?

Porque al agregar algo a la propiedad innerHTML se vuelve a procesar todo el contenido.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #6 (permalink)  
Antiguo 04/02/2013, 22:30
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años
Puntos: 1567
Respuesta: Problema con los campos file

Aqui una variante
el parent
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <title>titulo</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <script type="text/javascript">
  7. //<![CDATA[
  8. function agregar(){
  9. window.destino.agrega_file();
  10. }
  11. //]]>
  12. </head>
  13. <div><button onclick="agregar()">agregar</button></div>
  14. <iframe src="file.html" width="400" height="400" name="destino" id="destino"></iframe>
  15. </body>
  16. </html>

el iframe (file.html)
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <title>titulo</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <script type="text/javascript">
  7. //<![CDATA[
  8. function agrega_file(){
  9. var contenido = document.getElementById('campos_file').innerHTML;
  10. document.getElementById('campos_file').innerHTML = contenido + "<input type='file' name='file[]' onchange='otrafunc();'\/><\/br>";
  11. document.getElementById('procesar').disabled = false;
  12. }
  13. function otrafunc(){
  14. alert('onchange desde los input file');
  15. }
  16. //]]>
  17. </head>
  18. <form action="respuesta.html">
  19. <div id="campos_file">
  20. </div>
  21. <input type="submit" name="procesar" id="procesar" disabled="disabled" />
  22. </form>
  23. </body>
  24. </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
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #7 (permalink)  
Antiguo 05/02/2013, 10:11
 
Fecha de Ingreso: noviembre-2012
Mensajes: 10
Antigüedad: 11 años, 7 meses
Puntos: 0
Respuesta: Problema con los campos file

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

Código Javascript:
Ver original
  1. newfile.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.
  #8 (permalink)  
Antiguo 05/02/2013, 10:31
 
Fecha de Ingreso: noviembre-2012
Mensajes: 10
Antigüedad: 11 años, 7 meses
Puntos: 0
Respuesta: Problema con los campos file

¡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...
  #9 (permalink)  
Antiguo 05/02/2013, 10:36
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 19 años, 2 meses
Puntos: 839
Respuesta: Problema con los campos file

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.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.

Etiquetas: file, input, js, values
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:20.