从DOM树中删除后提交FORM

时间:2013-01-24 13:12:55

标签: javascript html forms internet-explorer

我想要做的是:我希望将表单对象保留在某处,然后将其发送到服务器。如果表单只包含文本/收音机/复选框等,它可以正常工作,但是当有文件上载字段时,它在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树的一部分。

THX,

1 个答案:

答案 0 :(得分:0)

这样的事情会起作用吗?您只需隐藏表单,将其保留在原位但不显示。然后用你的文字显示另一个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!";
}