XMLHttpRequest POST 다중부분/양식-데이터

XMLHttpRequest POST 다중부분/양식-데이터

페이지 새로 고침을 피하고 유용한 XML을 돌려받을 수 있도록 파일 형식 입력 요소가 포함된 양식을 자바스크립트에 XML HttpRequest를 사용하여 게시하고 싶습니다.

자바스크립트를 사용하여 양식의 대상 속성을 MSIE의 iframe 또는 Mozilla의 객체로 설정하여 페이지 새로 고침 없이 양식을 제출할 수 있지만, 이는 두 가지 문제가 있습니다.사소한 문제는 타겟이 W3C 호환이 되지 않는다는 것입니다(그래서 XHTML이 아닌 자바스크립트로 설정했습니다).가장 큰 문제는 적어도 OS X Leopard의 Mozilla에서는 onload 이벤트가 발생하지 않는다는 것입니다.게다가, XMLHtpRequest는 iframe의 경우처럼 XHTML에 국한되지 않고, 반환되는 데이터가 XML일 수 있기 때문에 더 좋은 응답 코드를 만들어 줄 것입니다.

양식을 제출하면 다음과 같은 HTTP가 나타납니다.

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 개체의 전송 방법을 어떻게 해야 합니까?

당신은 직접 'martart/form-data' 요청을 구성할 수 있습니다(http://www.faqs.org/rfcs/rfc2388.html) 에서 자세한 내용을 읽은 후 사용).send메소드(즉,xhr.send(당신의 아트-폼-데이터)를 입력합니다.마찬가지로, 그러나 더 쉽게 Firefox 4+(Chrome 5+ 및 Safari 5+에서도 마찬가지)에서 이러한 요청을 구성하는 데 도움이 되는 FormData 인터페이스를 사용할 수 있습니다.send 내용은 에의 . 그러나 만약 당신이 이미지와 같은 이진 데이터를 보내고 싶다면, 당신은 그것을 당신의 도움으로 할 수 있습니다.sendAsBinary파이어폭스 3.0부터 시작된 메소드입니다.다음을 통해 파일을 보내는 방법에 대한 자세한 내용은XMLHttpRequest, http://blog.igstan.ro/2009/01/pure-javascript-file-upload.html 을 참조하시기 바랍니다.

jax 파일 업로드를 위한 javascript 전용 솔루션이 없기 때문에 javascript 내부의 파일 입력 필드에 접근할 수 있는 방법이 없습니다.

아이프레임을 사용하는 것과 같은 해결책이 있습니다.

다른 방법으로는 SWFload나 Google Gears 같은 것을 사용하는 것이 있습니다.

iframe(보이지 않는 것)이 어떤 내용도 아닌 XHTML을 암시하는 이유를 모르겠습니다.iframe을 사용하는 경우 준비 상태 변경 이벤트를 설정하고 '완료'를 기다릴 수 있습니다.그 다음에는 프레임을 사용할 수 있습니다.창.창문.창문문자열 결과를 얻기 위해 HTML(누군가 수정해주세요).

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

이 작업을 수행하려면 IFrame에 게시해야 합니다. 폼에 대상 속성을 추가하기만 하면 됩니다. 여기서 IFrame ID를 지정합니다.이와 같은 것:

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

지정한 onload 이벤트에 대해 혼란스럽습니다. 페이지에 있는지 iframe에 있는지 첫 번째 답변이 정확합니다. 순수하게 xmlhttprequest를 사용하여 이를 수행할 방법이 없습니다. 응답이 iframe에 존재하면 원하는 것이 어떤 방법을 트리거하는 것이라면 DOM 스크립팅을 사용하여 이미 내용이 있는지 여부를 확인한 다음 방법을 실행하십시오.

iframe에 로드 이벤트를 부착합니다.

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

내용-처분 : 양식-자료, 이름

세미콜론은 다음과 같이 사용해야 합니다.내용-배치: 양식-데이터; 이름

FormData(전체 문서 @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>

Alex Polo의 답변에 다시 한번 감사드립니다.

언급URL : https://stackoverflow.com/questions/155371/xmlhttprequest-post-multipart-form-data