jQuery에서 Ajax 요청으로 FormData 객체를 보내는 방법

 

질문 : jQuery에서 Ajax 요청으로 FormData 객체를 보내는 방법은 무엇입니까?

---

XMLHttpRequest 레벨 2 표준 (여전히 작업 초안)은 FormData 인터페이스를 정의합니다. 이 인터페이스를 사용하면 XHR 요청 (Ajax 요청)에 File

Btw, 이것은 새로운 기능입니다. 과거에는 "hidden-iframe-trick"이 사용되었습니다 ( 다른 질문 에서 이에 대해 읽어보십시오).

작동 방식 (예) :

var xhr = new XMLHttpRequest(),
    fd = new FormData();

fd.append( 'file', input.files[0] );
xhr.open( 'POST', 'http://example.com/script.php', true );
xhr.onreadystatechange = handler;
xhr.send( fd );

여기서 input 은 <input type="file"> 필드이고 handler 는 Ajax 요청에 대한 성공 처리기입니다.

이것은 모든 브라우저 (IE 제외)에서 아름답게 작동합니다.

이제이 기능을 jQuery와 함께 사용하고 싶습니다. 나는 이것을 시도했다 :

var fd = new FormData();    
fd.append( 'file', input.files[0] );

$.post( 'http://example.com/script.php', fd, handler );

안타깝게도 작동하지 않습니다 ( "Illegal invocation"오류가 발생합니다 -screenshot is here ). jQuery가 form-field-names / values를 나타내는 간단한 키-값 객체를 예상하고 전달하는 FormData 인스턴스가 분명히 호환되지 FormData

FormData 인스턴스를 xhr.send() 에 전달할 수 있으므로 jQuery와 함께 작동 할 수도 있기를 바랍니다.

최신 정보:

jQuery의 버그 추적기에서 "기능 티켓"을 만들었습니다. 여기 : http://bugs.jquery.com/ticket/9995

"Ajax 프리 필터"를 사용하도록 제안 받았습니다 ...

최신 정보:

먼저, 제가 달성하고 싶은 행동을 보여주는 데모를 보여 드리겠습니다.

HTML :

<form>
    <input type="file" id="file" name="file">
    <input type="submit">
</form>

자바 스크립트 :

$( 'form' ).submit(function ( e ) {
    var data, xhr;

    data = new FormData();
    data.append( 'file', $( '#file' )[0].files[0] );

    xhr = new XMLHttpRequest();

    xhr.open( 'POST', 'http://hacheck.tel.fer.hr/xml.pl', true );
    xhr.onreadystatechange = function ( response ) {};
    xhr.send( data );

    e.preventDefault();
});

위의 코드는이 HTTP 요청을 생성합니다.

이것이 내가 필요로하는 것 입니다. "multipart / form-data"콘텐츠 유형을 원합니다!

제안 된 솔루션은 다음과 같습니다.

$( 'form' ).submit(function ( e ) {
    var data;

    data = new FormData();
    data.append( 'file', $( '#file' )[0].files[0] );

    $.ajax({
        url: 'http://hacheck.tel.fer.hr/xml.pl',
        data: data,
        processData: false,
        type: 'POST',
        success: function ( data ) {
            alert( data );
        }
    });

    e.preventDefault();
});

그러나 결과는 다음과 같습니다.

보시다시피 콘텐츠 유형이 잘못되었습니다 ...

답변

---

나는 당신이 다음과 같이 할 수 있다고 믿습니다.

var fd = new FormData();    
fd.append( 'file', input.files[0] );

$.ajax({
  url: 'http://example.com/script.php',
  data: fd,
  processData: false,
  contentType: false,
  type: 'POST',
  success: function(data){
    alert(data);
  }
});

메모:

• processData 를 false 설정하면 jQuery가 데이터를 쿼리 문자열로 자동 변환하는 것을 방지 할 수 있습니다. 자세한 내용 은 문서 를 참조하세요.
• contentType 을 false 설정하는 것은 필수적입니다. 그렇지 않으면 jQuery 가 잘못 설정하기 때문 입니다.

 

출처 : https://stackoverflow.com/questions/6974684/how-to-send-formdata-objects-with-ajax-requests-in-jquery