Crear campos ocultos (para sabios)

ferent · #1 (**permalink**) 10/11/2004, 10:22

Buenas a todos;

Les comento lo que necesito, a ver si alguien tiene la imaginación que a mí me falta (y los conocimientos

).

Mi problema es el siguiente: desde un formulario con un campo de archivo (<input type="file" name="file" />) necesito que lo que seleccione se guarde en un campo oculto (<input type="hidden">), y que del mismo modo se puedan ir creando nuevos campos ocultos segun yo vaya seleccionando archivos.

Esto se debe a lo siguiente, en dicho formulairo pretendo subir X número de fotos (que posteriormente guardo en una carpeta en el servidor), y como no sé cuantas voy a subir, me veo en la obligación de crear un único campo de archivos y que por medio de Javascript se vaya guardando dinámicamente la ruta de cada archivo seleccionado.

Lo de los campos ocultos pienso que es necesario para procesar la/s ruta/s de cada foto, así todo si se les ocurre otra opción...

¿Se les ocurre algo o es imposible hacer algo así con Javascript?

Gracias de antemano.

JavierB · #2 (**permalink**) 10/11/2004, 10:57

Hola ferent.

Lo de para sabios me hace dudar

pero bueno... yo dejo mi código y que pase lo que tenga que pasar:

Código HTML:

<html>
<head>
<script type="text/javascript">
num=0;
function anadir(fil) {
  obj=fil.form;
  num++;
  elem=document.createElement('input');
  elem.type='hidden';
  elem.name='oculto'+num;
  elem.value=fil.value;
  obj.appendChild(elem);
}
</script>
</head>
<body>
<form>
<input type="file" onchange="anadir(this)" />
<input type="button" onclick="alert(this.form.childNodes.length)" />
</form>
</body>
</html>

Saludos,

ferent · #3 (**permalink**) 10/11/2004, 12:35

¿ME puedes explicar un poco en qué consiste? ya que no aprecio ningún cambio, examino una imagen, la selecciono y luego... ¿tengo que pulsar en el boton en donde has definido la función onclick?

Comentarte que si lo hago me parece un mensaje de alerta que pone "1". ¿?

JavierB · #4 (**permalink**) 10/11/2004, 13:36

Hola de nuevo.

En primer lugar decirte que la línea:

<input type="button" onclick="alert(this.form.childNodes.length)" />

puedes quitarla. La puse para comprobar si se creaban los campos y se ma olvidó quitarla. Para que funcione solo tienes que usar el control file y cuando selecciones un archivo se creará un campo oculto con el valor del archivo elegido.

Ahora te pongo la función comentada:

Código HTML:

num=0; // variable para poder dar nombres distintos a los campos creados
function anadir(fil) {
  obj=fil.form; // averiguo cual es el objeto formulario
  num++; // aumento en 1 la variable

  // creo un elemento <input>
  elem=document.createElement('input');

  // le pongo como tipo oculto
  elem.type='hidden';

  // aquí le voy asignando nombres (oculto1, oculto2, ...)
  elem.name='oculto'+num;

  // le pongo al campo el valor que tiene el control file
  elem.value=fil.value;

  // le añado el control al formulario
  obj.appendChild(elem);
}

Si necesitas alguna aclaración más no dudes en volver a preguntar. Saludos,

ferent · #5 (**permalink**) 11/11/2004, 02:43

Vaya, ahora lo veo más claro y me sorprende la rapidez con que lo desarrollaste pese a ser algo tan concreto. Felicidades.

¿Sabes si hay alguna forma para poder mostrar en pantalla directamente el nombre de cada archivo elejido, o en su defecto las rutas absolutas tomadas del input file?

El proceso sería el siguiente, al añadir cada imagen, que en algún punto de la página se fuesen mostrando para que sepa (sin tener que pulsar en ningún sitio) que dichas rutas han sido guardadas en la variable "elem.value".

Yo mientras voy a ver la posibilidad de eliminar, de las rutas guardadas en javascript, las imágenes que haya seleccionado por error.

Muchas gracias por tu interés.

JavierB · #6 (**permalink**) 11/11/2004, 10:28

Rehola.

Gracias por las felicitaciones. La verdad es que una vez que se entiende como crear componentes dinamicamente, el resto no son más que variaciones de la misma idea.

Para mostrar en pantalla las rutas elegidas podrías usar algo como:

<select size="5">

y ahí ir añadiendo los archivos que el usuario escoja. En la FAQ-1 de JavaScript tienes el código necesario. De paso te serviría para que el usuario seleccione el que quiera eliminar.

Saludos,

ferent · #7 (**permalink**) 11/11/2004, 10:57

Ok, lo miraré y te cuento.

Saludos

jadephp · #8 (**permalink**) 19/12/2006, 08:49

Hola a todos

, soy nueva en este foro, veo que hay inquietudes y respuestas muy interesantes, necesito x favor me ayuden es algo parecido a lo de ferent

En un formulario tengo 2 Combos Listas, (1Combo)Unidad q de acuerdo al valor seleccionado refresca el (2Combo)Examenes.

Entonces, tengo una Tabla con un Boton (Agregar) la cual me va a mostrar el examen y la fecha; y utilizo el codigo de JavierB, y solo muestra la primera vez, porque cuando selecciono otra Unidad el Submit del mismo me borra los datos que tengo en la tabla, como hacer para que pueda seleccionar n unidades y examenes y aparezcan en la tabla.

Tengo mas o menos la idea de trabajar con los campos ocultos, a medida q vaya agregando se va generando la fila y el campo oculto, pero no se, quiero escuchar opiniones.
Por favor, agradezco toda la colaboracion que me pueda brindar

eits · #9 (**permalink**) 19/12/2006, 11:52

hola jadephp, antes que nada bienvenida al foro(tal vez no sea el indicado pero ya lo puse).

disculpa que no te de la respuesta, pero si una ayudadita para que la encuentres mas rápido, lo mejor es que crees un nuevo post y veras como te responden mas rapido y mientras te responden busca en el google que si hay, yo lo he visto pero desgraciadamente no recuerdo donde.

saludos

jadephp · #10 (**permalink**) 19/12/2006, 17:53

Mucha gracias eits

, por tu atencion, creo q no fui clara, estoy haciendo un Formulario de Control de Citas de Pacientes; el maneja Unidades y Examenes, las Unidades puede ser:(Endoscopia,etc) y los Examenes:(Enteroscopia,etc).

Cuando selecciono el Combo Unidades el hace un Submit y de acuerdo a la Unidad muestra el Examen, todo eso lo hace; tambien tengo un campo fecha, el cual el usuario va a introducir y el sistema va a validar si tiene la disponibilidad de la cita;
Ahora, lo q intento hacer es, cada vez q presione el Boton Agregar, genere una fila y muestre el Examen y la Fecha, esto lo hace, pero cuando selecciono otra Unidad y Examen el Submit de ellos, me borra en la Tabla.
Disculpa tanta explicacion, pero es que necesito de verdad que me ayuden o me den ideas,
Por favor

Muchas gracias por toda la colaboracion