文件上传的表单嵌套，jQuery提交父表单答案

【问题标题】：Form nesting for file upload, jQuery submitting parent form文件上传的表单嵌套，jQuery提交父表单
【发布时间】：2011-06-17 14:00:45
【问题描述】：

我正在尝试以下内容：

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 表单，因此即使我的代码显示 $('#form2').submit()，也会在表单 2 onchange 而不是表单 2 上触发此事件。如果表单 1 正常提交，则问题不会出现。

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

一种选择是只使用表单 1 并暂时将其操作更改为表单 2 操作，但随后我必须提交整个表单，如果表单很长，这会减慢一切。

有什么更聪明的方法可以实现吗？

【问题讨论】：

标签： jquery forms file upload nested

【解决方案1】：

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

【讨论】：

在生成的 iframe 中添加任何内容时遇到问题。似乎必须在 document.ready 中完成，但您似乎无法在 jQuery 插件中轻松使用它。下面的替代解决方案。

【解决方案2】：

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

在 IE 中，我将表单 2 文件输入放入表单 1，然后使用 onChange 事件将文件输入移动（附加）到表单 2，触发提交，然后将文件输入移回原来的位置。这有点“hacky”，但它似乎工作得很好。

【讨论】：