[컴][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);




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.

댓글 2개:

  1. 안녕하세요, 글 읽고 궁금한게있어 댓글 달아욥..
    혹시 "multipart encoded request 의 일부로 file 을 보내는 방법"에서 콜백?을 받는 페이지나 그런건 없나요?
    또, xhr.open('POST', 'myserver/uploads'); 여기에서 'myserver/uploads'이것은 단순 경로인가요??

    답글삭제
    답글
    1. 관련해서 본문을 update 했습니다.~

      삭제