[컴][js] javascript 에서 file upload

자바스크립트 파일 업로드

javascript 에서 file upload

• IE9 과 그 이전 버전의 browser : <input type="file"> 를 가지고 있는  <form>  을 submit 하는 방법으로 file 을 올릴 수 있었다.
• 최신버전 browser : File API를 사용할 수 있다.

File API 로 file 을 올리는 방법 2가지

1. multipart encoded request 의 일부로 file 을 보내는 방법
2. file 을 request 의 body 로 해서 file 을 보내는 방법

multipart encoded request 의 일부로 file 을 보내는 방법

아래에서 'myserver/uploads' 는 protocol 이 빠진 단순한 url 이다.

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);

file 을 request 의 body 로 해서 file 을 보내는 방법

여기서는 callback 함수도 같이 지정했다.

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

xhr.open('POST', 'myserver/uploads');
xhr.setRequestHeader('Content-Type', file.type);
xhr.onload = () => {
    let {success, error, complete} = this.props
    if (xhr.status === 200) {
        if(success){
            success(xhr.responseText);
        }
    }
    else {
        if(error){
            error(xhr, xhr.status);
        }
    }
    if(complete){
        complete(xhr);
    }
};
xhr.send(file);

fetch 를 이용해서 upload

• javascript - How to post image with fetch? - Stack Overflow

References

1. Ajax Requests – You Don't Need jQuery! – Free yourself from the chains of jQuery by embracing and understanding the modern Web API and discovering various directed libraries to help you fill in the gaps.