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 :

 <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

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.

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.

<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.

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.

$('.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