form post로 파일 전송 시, XHR을 이용하여 progress상태 얻기

XHR : Javascript에서 refresh과정 없이, 서버와 무언가를 주고받을 일이 있을 때 사용한다.

나는 파일 전송 시, progress상태를 얻어야하니까 이거 필요하다.

아니라면 서버쪽에 별도로 뭘 구현해서 처리해야하는데.. 그거는 좀... 

 

XHR에 관한 자세한 설명은 아래 링크

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

Using XMLHttpRequest - Web APIs | MDN

 

우선 나는 파일 전송 시, progress상태를 얻고싶은거다.

나의 기존 파일 전송 코드는 아래와 같다.

$.ajax({
	url : 접속할URL주소,
    data : 데이터,
    ...
    xhr: function(){
    	let xhr = $.ajaxSettings.xhr();
        xhr.onprogress = function(e){
        	//onProgress시 할일
        };
        xhr.onloadend = function(e){
        	//전송 완료되면 호출된다. 이때 할일
        }
        xhr.onloadstart = function(e){
        	//전송 시작 시 호출될때 하는일
        }
        return xhr;
    },
    ...
}

저렇게 onprogress에 원하는 할일을 정의하면 끝~