양식을 DOM 트리에서 제거한 후 제출하십시오.

Question

내가 원하는 것은 다음과 같습니다. 양식 객체를 어딘가에 보관하고 나중에 서버로 보내려고합니다. 양식에 텍스트/라디오/체크 박스 등이 포함되어 있으면 잘 작동하지만 fileupload 필드가있을 때 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와 크롬 있지만 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,

Answer 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!"; 
} 

: 여기

는 작업 사본입니다