xmlhttprequest post multipart/form-data

StackOverflow https://stackoverflow.com/questions/155371

  •  03-07-2019
  •  | 
  •  

문제

JavaScript에서 xmlhttprequest를 사용하여 파일 유형 입력 요소가 포함 된 양식을 게시하여 페이지 새로 고침을 피하고 유용한 XML을 다시 얻을 수 있습니다.

JavaScript를 사용하여 페이지 새로 고침없이 양식을 제출하여 양식의 대상 속성을 MSIE의 iframe 또는 Mozilla의 객체로 설정할 수 있지만 두 가지 문제가 있습니다. 사소한 문제는 Target이 W3C를 준수하지 않는다는 것입니다 (XHTML이 아닌 JavaScript로 설정하는 이유). 주요 문제는 Os X Leopard의 Mozilla에서 Onload 이벤트가 발사되지 않는다는 것입니다. 게다가, XMLHTTPREQUEST는 반환 된 데이터가 XML 일 수 있고 iframe의 경우와 마찬가지로 XHTML에 국한되지 않기 때문에 더 예쁜 응답 코드를 만듭니다.

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 객체의 보내기 메소드를 어떻게 얻습니까?

도움이 되었습니까?

해결책

'멀티 파트/양식-데이터'요청을 직접 구성 할 수 있습니다 (자세한 내용은 http://www.faqs.org/rfcs/rfc2388.html) 그리고 다음을 사용하십시오 send 방법 (예 : xhr.send (multipart-form-data)). 마찬가지로 Firefox 4+ (Chrome 5+ 및 Safari 5+)에서 FormData 그러한 요청을 구성하는 데 도움이되는 인터페이스. 그만큼 send 방법은 텍스트 콘텐츠에 적합하지만 이미지와 같은 이진 데이터를 보내려면 sendAsBinary Firefox 3.0으로 시작한 방법. 파일을 통해 파일을 보내는 방법에 대한 자세한 내용은 XMLHttpRequest, 참조하십시오 http://blog.igstan.ro/2009/01/pure-javaScript-file-upload.html.

다른 팁

JavaScript 내부에 파일 입력 필드에 액세스 할 수있는 방법은 없으므로 ajax 파일 업로드를위한 JavaScript 전용 솔루션이 없습니다.

같은 해결 방법이 있습니다 iframe 사용.

다른 옵션은 같은 것을 사용하는 것입니다 swfupload 또는 Google 기어

iframe (보이지 않는 사람)이 XHTML을 의미하는 이유는 없으며 콘텐츠가 아닙니다. iframe을 사용하는 경우 OnreadyStateChange 이벤트를 설정하고 '완료'를 기다릴 수 있습니다. 다음으로 frame.window.document.innerhtml (누군가를 수정하십시오)을 사용하여 문자열 결과를 얻을 수 있습니다.

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" />

나는 당신이 지정한 온부하 이벤트에 대해 혼동합니다. 페이지 나 iframe에 있습니다. 첫 번째 대답은 순수하게 xmlhttprequest를 사용하여 이것을 할 수있는 방법이 없습니다. iframe에서는 컨텐츠가 이미 있는지 또는 DOM 스크립팅을 사용하지 않는지 확인한 다음 메소드를 발사하십시오.

Onload 이벤트를 iframe에 첨부합니다

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

내용화 : 양식 데이터, 이름

다음과 같이 세미콜론을 사용해야합니다. 내용화 : Form-Data; 이름

다음은 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에게 다시 한번 감사드립니다

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top