Jquery ajax file progress(Jquery ajax 파일 프로그래스)

$.ajax(아작스)는 Jquery(제이쿼리)를 활용하여 비동기 방식으로 파일을 전송하는 방법을 의미 합니다.

ajax는 XMLHttpRequest(줄여서 XHR)를 사용하여 서버와의 통신을 주고 받습니다.

기존에 XMLHttpRequest를 활용하려면 문법적으로 길고 어려워 좀 더 쉽게 사용할 수 있게 해준 것이 바로 ajax라고 합니다.

 

ajax에 파일이 전송되는 현황을 보려면 ajax속성에 존재하는 xhr이라는 값을 할당하여 주면 됩니다.

전송하는 데이터는 FormData 객체를 사용하여 직관적이고 쉽게 할 수 있습니다.

const param = new FormData()
param.append('일반데이터1', '값1')
param.append('일반데이터2', '값2')
param.append('파일데이터', $('대상파일')[0].files[0])

$.ajax({
    url: '보낼주소',
    processData: false,
    contentType: false,
    data: param,
    type: 'POST',
    xhr: function(){  //xhr 설정
        let xhr = $.ajaxSettings.xhr()  //ajax에서 xhr객체를 가져 옵니다.
        xhr.upload.onprogress = function(e){  //프로그래스 콜백 함수에서 뭐할지 정의하여 줍니다.
            let percent = e.loaded / e.total * 100 //도달한 값에서 총 값을 나눈뒤 100을 곱하여 줍니다.(백분율)
            console.log(percent)  //퍼센트 입니다.
        }
        return xhr  //정의된 xhr을 리턴하여 ajax에서 사용하도록 합니다.
    },		
    success: function(res){
        console.log(res)
    },
    error : function(e){
        console.log(e)
    }
})

 

내용이 그렇게 어렵지가 않습니다.

실제 동작하는 모습 입니다.

퍼센트가 잘 나옵니다.

 

input type file이 여러개 라면 각각 파일을 전송하거나, 서버에서 상태값을 보내어 진행율을 재차 가져와야 하는 코드로 작성 해야합니다.

간단하게 살펴본 ajax 프로그래스 기능이였습니다.

문의사항이나 틀린부분은 언제든 연락주세요. :)