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 회원님들께서도 항상 건강하시고
답변해주실 분들께 미리 감사드려요 :)
답변 1
테스트는 안해봤지만....
이런식이면 되지 않을까요?
function aa(){
$("body").css("cursor", "progress");
bb();
}
function bb(){
var fileInput = document.getElementById("file_input");
var files = fileInput.files;
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 : cc
});
}
}
function cc(data){
$("body").css("cursor", "default");
}
안녕하세요? ^^
날씨가 무더운데 귀한 시간을 내서 답변해주셔서 감사합니다!
말씀해주신 방식으로 적용해봤는데 제가 테스트한 환경에서는 별다른 차이가 없네요 ㅠㅠ
아무래도 제가 처음부터 스크립트를 잘못 작성해서 발생한 문제인 것 같아요~
수정해야 할 부분이 많아지겠지만 반복문을 자바스크립트에서 돌리는 것이 아니라,
ajax에서 한꺼번에 넘긴 후에 PHP에서 반복문을 돌리는 방법으로 해결해야 될 것 같네요 T.T
그럼 오늘 많이 더운데 항상 건강하시길 기원합니다!
다시 한 번 감사드려요~
