从 DOM 树中删除后提交 FORM答案

【问题标题】：Submit a FORM after it was removed from DOM Tree从 DOM 树中删除后提交 FORM
【发布时间】：2013-01-24 22:29:51
【问题描述】：

我想要做的是：我想将表单对象保存在某个地方并稍后将其发送到服务器。如果表单只包含文本/收音机/复选框等，它可以正常工作，但是当有文件上传字段时，它在 Internet Explorer 中不起作用。

这里是一个例子：

<div id="container">
  <form id="testForm">
    <input type="file" name="photo"/> 
  </form>
  <input type="button" onclick="uploadLater();"/>
</div>

function uploadLater()
{
   window.oldForm = document.getElementById('testForm');
   document.getElementById('container').innerHTML = "thanks!";
}

稍后执行的另一个函数如下所示（注意：适用于 FF 和 Chrome，但不适用于 IE，遗憾的是 IE 不发送文件）：

function doItNow()
{
  if(!window.oldForm.parentNode) document.body.append(window.oldForm);
  // ... other parameters omitted ...
  window.oldForm.submit();
  window.oldForm.parentNode.removeChild(window.oldForm);

  alert('hurray! data on its way ...');
}

有没有人知道在 IE 中进行类似操作的解决方案？在一定延迟后（跨浏览器）发送一个包含文件且不属于 DOM 树的表单。

谢谢，

【问题讨论】：

标签： javascript html forms internet-explorer

【解决方案1】：

这样的东西会起作用吗？您只需隐藏表单，将其保留在原处但不显示。然后用你的文本显示另一个 div。

这是工作副本：http://jsfiddle.net/KhJAt/

<div id="container">
  <div id="displayMessage" style="display:none;"></div>
  <form id="testForm">
    <input type="file" name="photo"/> 
  </form>
  <input type="button" onclick="uploadLater();" value="Click it"/>
</div>

function uploadLater()
{
   window.oldForm = document.getElementById('testForm');
   window.oldForm.style.display="none";
   document.getElementById('displayMessage').style.display="";
   document.getElementById('displayMessage').innerHTML = "thanks!";
}

【讨论】：