文件上传的表单嵌套，jQuery 提交父表单
我正在尝试实现以下目标：
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 和 form 2 塞入文档正文，然后通过 JS 通过单击链接启动文件对话框。但对于任何 IE 版本，文件输入字段都必须存在，因为 IE 似乎不允许在更改时输入文件，除非用户单击了实际字段。
一种选择是只使用表单 1 并暂时将其操作更改为表单 2 操作，但随后我必须提交整个表单，如果表单很长，则会减慢一切速度。
有没有更聪明的方法可以实现这一点？
I'm trying to have the following:
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
Basically the idea is that I have a form with a section for adding an image. However, I also want an image preview so I need a nested form to input the file. The main form should only be submitted when I hit the submit button.
I know that nested forms are not really allowed but they still seem to work. However I've run into a snag and that is jQuery submitting the main form (form 1) when it should submit form 2! It seems that since I have an AJAX form submit for form 1 that this event is fired on the form 2 onchange instead of form 2 submit like it should, even though my code says $('#form2').submit(). If form 1 is submitted normally then the problem doesn't manifest.
For modern browsers I can just cram the iframe and form 2 into the document body and start the file dialog via JS by clicking a link. But for any IE version the file input field must be present since IE doesn't seem to allow file input onchange unless the user has clicked the actual field.
One option would be to have just form 1 and temporarily change its action to form 2 action but then I have to submit the whole form and if the form is very long that slows everything down.
Is there any smarter way I can implement this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
将 form2 放入 iframe 中，并将一个函数绑定到主文档中该 iframe 的加载事件。当您提交 iframe 时，将在主页中调用该函数，您可以在主页中设置与上传的图像对应的预览图像的来源。
Put form2 into an iframe and bind a function to the load event of that iframe in the main document. When you submit the iframe, that function will be called in the main page and you can set the source of your preview image in the main page corresponding to the uploaded image.
通过将上传表单附加到其余输入元素所在的表单之后解决了这个问题。然后我使用链接访问文件字段（适用于 Chrome、FF 和 Safari）。我将表单放在主表单之后而不是仅仅将其添加到正文的原因是，在 jQuery UI 模式对话框中，如果表单 2 在正文中，由于模式对话框的性质，您将无法访问它（禁用外部事件）模式对话框）。
在 IE 中，我将表单 2 文件输入放入表单 1，然后通过 onChange 事件将文件输入移动（追加）到表单 2，触发提交，然后将文件输入移回到原来的位置。这有点“hacky”，但看起来效果很好。
Solved this by appending the upload form after the form where the rest of the input elements are. Then I use a link to access the file field (works in Chrome, FF and Safari). The reason why I put the form after the main form instead of just adding it to the body is that in jQuery UI modal dialog if form 2 is in body you can't access it due to the nature of the modal dialog (disables events outside the modal dialog).
In IE I put the form 2 file input into form 1 and then with the onChange event I move (append) the file input into form 2, fire submit and then move the file input back to where it was. It's a bit "hacky" but it seems to work quite nicely.