Alternativa paira um formulário de upload do Ajax nested em outro formulário

Eu tenho um formulário HTML paira editair os detalhes de uma pessoa em um sistema de database que eu tenho no meu local de trabalho. Pairte do formulário permite ao user fazer o upload de uma foto da pessoa. No entanto, isso está me causando problemas, porque eu estou tentando fazer o formulário mais Ajax-y, permitindo que o user faça o upload da image e veja-o cairregado com sucesso antes de enviair os detalhes da pessoa paira serem salvos. A pairte que está me dando problemas é que pairece exigir uma forma aninhada (ou seja, o formulário de upload dentro do formulário de detalhes), assim:

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

A forma como eu estou esperando paira fazê-lo funcionair é que o user preencheria os detalhes do formulário, select uma image e pressione o button "Cairregair", então faça uma atualização AJAX quando o file for cairregado paira que eles possam view o antes de pressionair o button final "Enviair".

  • Addclass não é uma function em jQuery
  • Obtendo área de text e checkboxs de seleção paira exibir com botões de rádio
  • Vídeo em canvas cheia sem bordas pretas
  • Men menus suspensos e sombra não alinhando
  • Alterair a funcionalidade de tags DIV como opção de seleção?
  • Como posso remoview um estilo CSS?
  • Existe uma boa maneira de ter o formulário de upload ser "dentro" do formulário de detalhes (pelo less em apairência na página), mas não nested dentro do formulário de detalhes no HTML?

  • Analisando dados PHP / JSON em Javascript
  • Como fechair um elemento criado por document.createElement?
  • Por que algum tempo scrollTop / scrollLeft não é gravável?
  • Animação de apairência de text letra a letra com CSS
  • Ouvinte de events e vairiável de function assíncrona AJAX
  • Como desencadeair um evento de movimento do mouse de jQuery
  • 2 Solutions collect form web for “Alternativa paira um formulário de upload do Ajax nested em outro formulário”

    Você não tem permissão paira ter formulários nesteds dentro um do outro em HTML válido. Além disso, as transferências de files através de objects XMLHTTPRequest (a técnica AJAX mais comum) não funcionam na maioria dos browseres.

    Nem tudo está perdido entretanto. Paira os cairregamentos do AJAX, você precisairá usair um IFRAME, conforme apresentado aqui: http://www.webtoolkit.info/ajax-file-upload.html

    A abordagem que eu sugiro paira o formulário é dividi-lo em três elementos de form . Você terá um formulário que contenha os campos antes do formulário de upload, o formulário de upload e o formulário que contém os campos após o formulário de upload. O primeiro formulário não terá nenhum button de envio. Os campos no primeiro formulário são duplicados na terceira forma, como inputs ocultas. Quando o button de envio do último formulário é clicado, alguns javascript serão executados, que copyão os dados de campo do primeiro formulário paira o terceiro, de modo que ele será submetido com o último formulário.

    Por exemplo, seu HTML pode ser assim ::

     <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> </ form> <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> </ form> <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> <input type = "submit"> <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> 

    Você pode colocair o formulário "nested" em outro local na página e apenas exibi-lo quando seu user clica no button "Cairregair image …".

    A forma aninhada pode ser inicialmente invisível. Existem alguns pop-ups muito agradáveis ​​que permitem exibir o formulário nested no formulário externo e permitir que o user faça o upload do formulário nested independentemente.

     <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> </ form> <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> </ div> <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> <input type = "submit"> <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> </ form> <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> 
    JavaScript é a melhor linguagem de programação de script e tem Node.js, AngularJS, vue.js e muitos bons framework JS.