XMLHttpRequest POST multipart/form-data

자바 스크립트에서 XMLHttpRequest를 사용하여 파일 형식 입력 요소가 포함 된 양식을 POST하여 페이지 새로 고침을 피하고 유용한 XML을 다시 가져올 수 있습니다.XMLHttpRequest POST multipart/form-data

JavaScript를 사용하여 양식의 대상 속성을 MSIE의 iframe 또는 Mozilla의 개체로 설정하기 위해 페이지 새로 고침없이 양식을 제출할 수 있지만 두 가지 문제점이 있습니다. 사소한 문제는 대상이 W3C와 호환되지 않는다는 것입니다 (이것이 내가 XHTML이 아닌 JavaScript로 설정 한 이유입니다). 가장 큰 문제는 적어도 OS X Leopard의 Mozilla에서는 onload 이벤트가 발생하지 않는다는 것입니다. 게다가 XMLHttpRequest는 반환 된 데이터가 iframe의 경우와 마찬가지로 XHTML에 국한되지 않고 XML 일 수 있으므로 더 예민한 응답 코드를 작성합니다.

Content-Type: multipart/form-data;boundary=<boundary string> 
Content-Length: <length> 
--<boundary string> 
Content-Disposition: form-data, name="<input element name>" 

<input element value> 
--<boundary string> 
Content-Disposition: form-data, name=<input element name>"; filename="<input element value>" 
Content-Type: application/octet-stream 

<element body>

가 어떻게 위의 HTTP 스트림을 복제 할 XMLHttpRequest 객체의 send 메소드를받을 수 있나요 :

과 같은 HTTP에서 양식 결과를 제출?

출처

2008-09-30 Robin like the bird

9 년 후에 답변을 수락했습니다. 당신은 stackexchange에서 두 번째입니다. – peterh

당신은 자신이 send 방법 (예. XHR을 사용 후 (http://www.faqs.org/rfcs/rfc2388.html에서 그것에 대해 더 읽기)과 '다중/폼 데이터의 요청을 구성 할 수 있습니다에 온로드 이벤트를 첨부합니다. send (your-multipart-form-data)). 비슷하게, 더 쉽지만 Firefox 4 이상 (Chrome 5 이상 및 Safari 5 이상)에서는 이러한 요청을 구성하는 데 도움이되는 FormData 인터페이스를 사용할 수 있습니다. send 메서드는 텍스트 내용에 적합하지만 이미지와 같은 이진 데이터를 보내려는 경우 Firefox 3.0부터 시작하여 sendAsBinary 메서드를 사용하여 수행 할 수 있습니다. XMLHttpRequest을 통해 파일을 보내는 방법에 대한 자세한 내용은 http://blog.igstan.ro/2009/01/pure-javascript-file-upload.html을 참조하십시오.

출처

2010-11-21 23:02:18

거룩한 ***. 고맙습니다! 내 서버가 내가 보낸 것을 구문 분석 할 수없는 한 시간 동안이 작업을 수동으로 수행하는 방법을 찾으려고 시도했습니다. –

iframe (보이지 않는 것)이 XHTML을 의미하고 ANY 콘텐츠가 아닌 이유를 알 수 없습니다. iframe을 사용하면 onreadystatechange 이벤트를 설정하고 '완료'를 기다릴 수 있습니다. 다음으로 string 결과를 얻기 위해 frame.window.document.innerHTML (나를 교정 해주십시오)을 사용할 수 있습니다.

var lFrame = document.getElementById('myframe'); 
lFrame.onreadystatechange = function() 
{ 
    if (lFrame.readyState == 'complete') 
    { 
     // your frame is done, get the content... 
    } 
};

출처

2008-09-30 22:42:31 helios

자바 스크립트 내부의 파일 입력 필드에 액세스 할 수있는 방법이 없으므로 아약스 파일 업로드를위한 자바 스크립트 솔루션 만 제공되지 않습니다.

using an iframe과 같은 해결 방법이 있습니다.

다른 옵션은 당신이 IFrame을 ID를 지정할 경우 단순히 폼에 대상 속성을 추가,이 작업을 얻기 위해 IFrame을에 게시해야합니다 SWFUpload 또는 Google Gears

출처

2008-09-30 22:42:40 TonyB

같은 것을 사용하는 것입니다. 이런 식으로 뭔가 : 난 당신이 지정한 onload 이벤트에 대한 혼란이다

 

<form method="post" target="myiframe" action="handler.php"> 
... 
</form> 
<iframe id="myiframe" style="display:none" />

출처

2008-09-30 22:45:52 mmattax

, 그것은 페이지에 또는 iframe에? 첫 번째 대답은 올바른 프로그래머에게 어떤 경우에이, XMLHttpRequest를 순수하게 사용을 할 수있는 방법이 없습니다 당신은 일단 응답이 iframe에 존재하면 어떤 메소드를 트리거하고, DOM 스크립팅을 사용하여 컨텐츠가 이미 있거나 없는지 여부를 확인한 다음 메소드를 시작합니다.

은 iframe을

if(window.attachEvent){ 
document.getElementById(iframe).attachEvent('onload', some_method); 
}else{ 
document.getElementById(iframe).addEventListener('load', some_method, false); 
}

출처

2008-10-04 18:15:57 Komang

내용 - 처리 : 폼 데이터, 당신은 다음과 같이 세미콜론을 사용한다

이름 : 내용 - 처리 : 폼 데이터;

출처

2011-06-29 15:27:23 Aldekein

이 이름을 FormData (full doc @MDN)

를 사용하여 최신의 방법까지 스크립트

var form = document.querySelector('#myForm'); 
form.addEventListener("submit", function(e) { 
    var xhr = new XMLHttpRequest(); 
    xhr.open("POST", this.action); 
    xhr.addEventListener("load", function(e) { 
     // Your callback 
    }); 

    xhr.send(new FormData(this)); 

    e.preventDefault(); 
});

<form id="myForm" action="..." method="POST" enctype="multipart/form-data"> 
    <input type="file" name="file0"> 
    <input type="text" name="some-text"> 
    ... 
</form>

다시 한 번 감사드립니다 (이 기본 형태에서) 알렉스 폴로에 대한 자신의 대답

출처

2017-12-31 13:58:56

XMLHttpRequest POST multipart/form-data

답변

관련 문제