jQuery없이 네티브자바스크립트로 서버에 요청보내기5- 파일업로드

파일 업로드를 위해 필요한 <input type="file" id="test-input"> 을 작성합니다.

jQuery에서 파일업로드를 어떻게 하는지 먼저 보겠습니다.

[code]

var file = $('#test-input')[0].files[0],

    formData = new FormData();

formData.append('file', file);

$.ajax('myserver/uploads', {

    method: 'POST',

    contentType: false,

    processData: false,

    data: formData

});

또는

var file = $('#test-input')[0].files[0];

$.ajax('myserver/uploads', {

    method: 'POST',

    contentType: file.type,

    processData: false,

    data: file

});

[/code]

XMLHttpRequest 기능을 이용한 파일업로드입니다.

[code]

var formData = new FormData(),

    file = document.getElementById('test-input').files[0],

    xhr = new XMLHttpRequest();

formData.append('file', file);

xhr.open('POST', 'myserver/uploads');

xhr.send(formData);

또는

var file = document.getElementById('test-input').files[0],

    xhr = new XMLHttpRequest();

xhr.open('POST', 'myserver/uploads');

xhr.setRequestHeader('Content-Type', file.type);

xhr.send(file);

[/code]

보시는거처럼 jQuery의 파일업로드는 사실상 XMLHttpRequest를 래퍼한것입니다.