2011-11-27 1 views
5

임 JS에서 폼 데이터를 게시하려고 :JS의 XMLHttpRequest 객체를 통해 양식 데이터를 게시 하시겠습니까? (크로스 브라우저)

이 코드가 있습니다

var formData = new FormData(); 
    formData.append("username", "Groucho"); 
    formData.append("accountnum", 123456); 
    formData.append("afile", "2"); 

var xhr = new XMLHttpRequest(); 
xhr.open("POST", "http://xxxxx/xx.ashx",true); 
xhr.send(formData); 

Formdata을 MDN을 따라하는 것은 IE에서 사용할 수있는 (또는 알 수 없음)이 아니다.

enter image description here (나는 ... 그 좋은 생각) :

나는 FF이 시도합니다.

내가 IE에서 시도 :

enter image description here

CROSSBROWSER (객관적인 방법이나 내 데이터 만) 양식 데이터를 게시 할 수있는 솔루션이 무엇입니다

?

답변

3

사용중인 IE 버전을 밝히지 않았습니다. IE9 이하에서는 formData 객체가 지원되지 않습니다. XMLHTTPRequest2 (formData 객체 포함)는 IE10 (http://caniuse.com/xhr2)에서 지원되어야합니다.

크로스 브라우저 AJAX 파일 업로드는 현재 매우 어렵습니다. 일 수 있습니다. 자바 스크립트로 양식 헤더/경계를 작성해보십시오. (답변 : 여기를 참조하십시오 : XMLHttpRequest POST multipart/form-data) 개인적으로는 노력할만한 가치가 없다고 생각합니다.

7

IE에서 FormData를 보낼 때 사용할 수있는 간단한 래퍼를 작성했습니다 (webkit/gecko에서는 아무 것도 엉망이되지 않습니다).

var ieFormData = function ieFormData(){ 
if(window.FormData == undefined) 
{ 
    this.processData = true; 
    this.contentType = 'application/x-www-form-urlencoded'; 
    this.append = function(name, value) { 
     this[name] = value == undefined ? "" : value; 
     return true; 
    } 
} 
else 
{ 
    var formdata = new FormData(); 
    formdata.processData = false; 
    formdata.contentType = false; 
    return formdata; 
} 

}

지금 단순히 모든 새로운 FormData를() 새로운 ieFormData()에 대한 호출 전환 및

processData: false, 
contentType: false, 

전환 : 당신이 FormData를 사용하기 전에 간단하게 다음과 같은 JS를 포함

processData: formdata.processData, 
contentType: formdata.contentType, 
cache: false, 

그리고 모두 설정되었습니다. 물론 이것은 (iframe 해킹이 여전히 필요하지만) 파일을 포함 할 수는 없지만 IE에서 FormData를 모방 할 수있게 해줍니다.

+0

비슷한 문제가 있지만이 문제를 해결하는 방법이 확실하지 않습니다. 내 코드가 var 일 경우 어떻게 바뀌나요? postedFile = document.getElementById ("file"). files [0]; \t \t var formElement = document.getElementById ("formID"); \t \t var form = new FormData (formElement); \t \t form.append ('postedFile', postedFile); \t \t request.open ("POST", "/ Admin/SaveQuestion /", true); \t \t request.send (form); – Jay

+0

게시 된 파일에 대해 너무 걱정하지 않습니다. 나머지 양식 데이터를 제출할 수 있기를 바랍니다. – Jay

관련 문제