jQuery ajax 업로드를 반복문으로 돌릴 때 커서 변경과 관련해서 질문 드려요

안녕하세요?

jQuery ajax 파일 업로드를 for 문으로 반복을 돌릴 때 커서 변경과 관련해서 질문 드려요 ^^

제가 사용하는 API에서 멀티파일 업로드를 지원하지 않아서

부득이 input 태그에서 받은 여러 개의 파일을 for문으로 반복하여 ajax 업로드를 처리하고 있는데요.

ajax가 시작하기 직전에 $("body").css("cursor", "progress");를 넣고

ajax의 success 또는 complete에 $("body").css("cursor", "default");을 넣으면 

여러 개의 파일 중 한 개의 파일이 업로드되면 바로 커서가 원래대로 복구가 되는데요.

이것을 모든 파일이 업로드된 후에 비로소 커서가 원래대로 복구하도록 수정할 수 있을까요?

var fileInput = document.getElementById("file_input");
var files = fileInput.files;
$("body").css("cursor", "progress");

for (var i = 0; i < files.length; i++) {

    var data = new FormData();
    data.append('up_load', files[i]); // IE에서 set 메서드를 지원하지 않아서 이렇게 처리했습니다.
    $.ajax({
        url: '/bbs/upload_process.php',
        method: 'post',
        data: data,
        async: true,
        processData: false,
        contentType: false,
        success : function(datas) {
            $("body").css("cursor", "default");
        }
    });
}

$.ajax를 사용해서 통신을 하면 $.ajax가 가장 마지막에 호출되어 동작하기 때문인지
 

$.ajax가 포함된 for문의 뒤에 $("body").css("cursor", "default");을 넣으면

커서가 progress로 아예 바뀌지 않는 것처럼 보이더군요 ㅠㅠ

덧붙여 여쭤보면 위 코드에서 for문 안의 1~2행인 아래와 같은 부분도

개발자분들께서 보시기에 자연스럽지 않은 코딩인 것 같다는 생각이 드는데요 ㅜㅜ

var data = new FormData();
data.append('up_load', files[i]); // IE에서 set 메서드를 지원하지 않아서 이렇게 처리했습니다.

원래는 data 변수의 선언은 for문 이전에 하고 data.set으로 처리하려고 했는데

IE에서는 set 메서드를 지원하지 않더군요.

(delete 메서드도 지원하지 않구요)

https://developer.mozilla.org/ko/docs/Web/API/FormData

제가 실력이 부족해서 코딩 컨벤션(?)과는 거리가 먼 엉뚱한 방식으로 처리를 한 것 같은데요.

SIR 회원님들께서는 이런 경우에 어떻게 처리하시는지 여쭤봅니다 ^-^

API 차원에서 지원하지 않는 멀티파일 업로드를 구현하려고 하다보니

저처럼 개발자도 아니고 IT 직역에도 종사하지 않는 초보자에게는 어렵네요 ㅠㅠ

그럼 날씨가 무더운데 SIR 회원님들께서도 항상 건강하시고 

답변해주실 분들께 미리 감사드려요 :)