Un formulario dentro de otro formulario

[OssoH]

Quiero tener un formulario y en la mitad de este agregar otro formulario para subir imagenes por medio de jquery de forma que vaya mostrando las imagenes que voy subiendo sin necesidad de recargar la pagina.
Luego al final tendre un boton donde guardaré todos los datos.
Se que no se puede tener un form dentro de otro, pero entonces en este caso ¿como hago para tener un form enctype=multiplar/form-data dentro de un form method=post action=...?.

Por ejemplo :

Código (html4strict) [Seleccionar] Expandir


<FORM action="http://algunsitio.com/prog/usuarionuevo" method="post">
   <P>
   Nombre: <INPUT type="text" name="nombre"><BR>
   Apellido: <INPUT type="text" name="apellido"><BR>
   email: <INPUT type="text" name="email"><BR>

<FORM action="http://servidor.com/cgi/procesar"
   enctype="multipart/form-data"
   method="post">
<P>
¿Cómo se llama usted? <INPUT type="text" name="nombre_del_remitente">
¿Qué ficheros desea enviar? <INPUT type="file" name="nombre_de_los_ficheros">
</P>
</FORM>

   <INPUT type="radio" name="sexo" value="Varón"> Varón<BR>
   <INPUT type="radio" name="sexo" value="Mujer"> Mujer<BR>
   <BUTTON name="enviar" value="enviar" type="submit">
   </P>
</FORM>




¿alguna idea?
Gracias

[JorgeEMX]

1) Usa un iframe para tus archivos sin AJAX.
2) Usa AJAX para enviar tus archivos, pero sólo con AJAX sin usar Jquery.

Cualquier que sea el caso, ya hay bastantes ejemplos por ahí (mira Google).

[OssoH]

si, voy a intentar subir los archivos por ajax. Sera lo mejor.
Gracias



Por curiosidad porque me recomiendas usar ajax y no Jquery para la subida de imagenes?

Mod: No hacer doble post.

[JorgeEMX]

Jquery no permite subir archivos, no de forma predeterminada.. se puede hacer con AJAX pero debes usar JS y llamar al objeto XMLHttpRequest.

[OssoH]

Gracias. Voy a investigar más sobre este tema.



Pongo el codigo que he encontrado por si alguien le sirve de tanta ayuda como a mi. Muchas gracias por tus consejos y tu rapidez.

Código (javascript) [Seleccionar] Expandir


<input type="file" id="uploadfile" name="uploadfile" />
<input type="button" value="upload" onclick="upload()" />


<script>
  var client = new XMLHttpRequest();
 
  function upload()
  {
     var file = document.getElementById("uploadfile");
   
     /* Create a FormData instance */
     var formData = new FormData();
     /* Add the file */
     formData.append("upload", file.files[0]);

     client.open("post", "/upload", true);
     client.setRequestHeader("Content-Type", "multipart/form-data");
     client.send(formData);  /* Send to server */
  }
   
  /* Check the response status */  
  client.onreadystatechange = function()
  {
     if (client.readyState == 4 && client.status == 200)
     {
        alert(client.statusText);
     }
  }
</script>


Mod: No hacer doble post.

[OssoH]

Una pregunta que tiene relación con lo anterior

Código (html4strict) [Seleccionar] Expandir


<input type="file" style="display:none;" id="fileUploadEle" name="fileUploadEle"/>
       <input type="button" value="Agregar fotos" class="btn-upload-button" />


Código (javascript) [Seleccionar] Expandir


$(".btn-upload-button").click(function(event){
$("#fileUploadEle").click();
alert('s');
event.preventDefault();
});


Quiero que cuando pulse el boton primero se ejecute $("#fileUploadEle").click(); de forma que se abra el archivo que quiero seleccionar para subir y luego el mensaje de alert('s'). Es decir de forma sincrona. Ahora me lo hace asincrona mostrandome el mensaje alert('s') sin haber llegado a seleccionar un fichero.

Gracias.

[#!drvy]

Lo que buscas no es posible ya que javascript no maneja los diálogos internos que vaya a mostrar el navegador. Puedes hacer un workaround que es añadir un handler que salte cuando el input cambie de valor.

Código (javascript) [Seleccionar] Expandir

$('.btn-upload-button').click(function(event){

  $('#fileUploadEle').click().on('change',function(){
     alert(this.value); // alert('s')
     this.off('change'); // Quitar handler
  });

  event.preventDefault();

});

Pero si el usuario no llega a seleccionar ningún archivo, no salta.

Saludos

[OssoH]

Si es lo que necesitaba. muchas gracias!!!!  eres un crack!!