表单嵌套用于文件上传，jQuery提交父表单

Question

我正在尝试以下内容：

form 1
   text input
   text input
   previewimage
   form 2
     file input, upload automatically on selecting file to hidden iframe and generate previewimage
   /form 2
   text input
   submit
/form 1

基本上我的想法是我有一个带有添加图像的部分的表单。但是，我还想要一个图像预览，所以我需要一个嵌套的表单来输入文件。只有在我点击提交按钮时才能提交主表单。

我知道嵌套表单并不是真正允许的，但它们似乎仍然有用。然而，我遇到了一个问题，那就是jQuery在提交表单2时提交主表单（表单1）！似乎因为我有一个表单1的AJAX表单提交，这个事件是在表单2 onchange上而不是表单2提交的，就像它应该的那样，即使我的代码说$（'＃form2'）。submit（）。如果表单1正常提交，则问题不会显现。

对于现代浏览器，我可以将iframe和表单2填入文档正文，然后通过单击链接通过JS启动文件对话框。但是对于任何IE版本，文件输入字段必须存在，因为IE似乎不允许文件输入onchange，除非用户点击了实际字段。

一种选择是只使用表单1并暂时更改其操作以形成2个操作，但之后我必须提交整个表单，如果表单很长，则会减慢所有内容。

有没有更聪明的方法可以实现这个？

Answer 1

将form2放入iframe并将函数绑定到主文档中该iframe的load事件。当您提交i​​frame时，将在主页面中调用该功能，您可以在与上传图像对应的主页面中设置预览图像的来源。

Answer 2

通过在其余输入元素所在的表单之后附加上传表单来解决此问题。然后我使用链接访问文件字段（适用于Chrome，FF和Safari）。之所以我把表单放在主表单之后而不是仅仅添加到正文中是因为在jQuery UI模式对话框中，如果表单2在正文中，则由于模态对话框的性质而无法访问它（禁用外部事件模态对话框）。

在IE中，我将表单2文件输入放入表单1，然后使用onChange事件将文件输入移动（追加）到表单2，触发提交，然后将文件输入移回原来的位置。它有点“hacky”但它看起来效果很好。