Alternativa a un formulario de subida de Ajax anidado en otra forma

Question

Tengo un formulario HTML para editar los detalles de una persona en un sistema de base de datos que tengo en mi lugar de trabajo. Parte del formulario permite al usuario cargar una imagen de la persona. Sin embargo, esto me está causando problemas, porque estoy tratando de hacer que el formulario sea más Ajax-y dejando que el usuario cargue la imagen y la vea cargada con éxito antes de enviar los datos de la persona para que se guarden. La parte que me está dando problemas es que parece requerir una forma anidada (es decir, el formulario de carga en el interior forman los detalles), así:

<form name="details"> 
    <input name="detail1"> 
    <input name="detail2"> 
    <form name="pictureupload"> 
     <input type="file" name="pic"> 
     <input type="submit" name="upload" value="Upload"> 
    </form> 
    <input type="submit"> 
</form> 

la forma en que estoy esperando para que funcione es que el usuario completará los detalles del formulario, seleccionará una imagen y presionará el botón "Cargar", luego realizará una actualización de AJAX cuando el archivo se cargue para que pueda ver la imagen antes de presionar el botón "Enviar" final.

¿Hay una buena forma de que el formulario de carga esté "dentro" del formulario de detalles (al menos en apariencia en la página) pero no anidado dentro del formulario de detalles en el HTML?

Answer 1

No tiene permitido tener formularios anidados uno dentro del otro en HTML válido. Además, las cargas de archivos a través de objetos XMLHTTPRequest (la técnica AJAX más común) no funcionan en la mayoría de los navegadores.

No todo está perdido, sin embargo. Para los archivos de AJAX, tendrá que utilizar un IFRAME, tal como se presenta aquí: http://www.webtoolkit.info/ajax-file-upload.html

El enfoque que sugeriría para la forma es dividirlo en tres form elementos. Tendrá un formulario que contiene los campos antes del formulario de carga, el formulario de carga y el formulario que contiene los campos después del formulario de carga. El primer formulario no tendrá ningún botón de envío. Los campos en la primera forma se duplican en la tercera forma, como entradas ocultas. Cuando se hace clic en el botón de envío de la última forma, se ejecutará un javascript que copiará los datos de campo del primer formulario al tercero, para que se envíe con el último formulario.

Por ejemplo, el código HTML podría tener este aspecto ::

<form name="details1"> 
    <input id="fake_detail1" name="detail1" type="text"/> 
    <input id="fake_detail2" name="detail2" type="text"/> 
</form> 
<form name="pictureupload"> 
    <input type="file" name="pic"> 
    <input type="submit" name="upload" value="Upload"> 
</form> 
<form name="details2"> 
    <input id="detail1" name="detail1" type="hidden"/> 
    <input id="detail2" name="detail2" type="hidden"/> 
    <input id="detail3" name="detail3" type="text"/> 
    <input type="submit"> 
</form> 

Answer 2

puede colocar el formulario de "anidado" en otro lugar de la página y sólo se mostrará cuando el usuario hace clic en un "Subir imagen. .. "botón.

La forma anidada puede ser inicialmente invisible. Hay algunas ventanas emergentes muy bonitas que le permiten mostrar el formulario anidado sobre el formulario externo y le permiten al usuario cargar el formulario anidado de forma independiente.

<div id="nestedform"> 
    <form name="pictureupload"> 
     <input type="file" name="pic"> 
     <input type="submit" name="upload" value="Upload"> 
    </form> 
</div> 

<div id="mainform"> 
<form name="details"> 
    <input name="detail1"> 
    <input name="detail2"> 
    <a href="#" onclick="Code to pop up the nested form">Upload Picture...</a> 
    <input type="submit"> 
</form> 
</div>