반응형
xhr 을 이용하여 로딩 진행도 가져왔다.
upload ajax에 적용
//프로그래스라벨 html 추가
let progressLabel = $('<td class="upload-progress"><progress max="100" value="0"></progress></td>');
//업로드함수 호출
uploadFile(file, progressLabel);
// 파일 업로드 함수
function uploadFile(file, progressLabel) {
var formData = new FormData();
formData.append('file', file);
$.ajax({
url: '/file_upload',
type: 'POST',
data: formData,
processData: false,
contentType: false,
xhr: function() {
var xhr = new XMLHttpRequest();
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
var percentComplete = (event.loaded / event.total) * 100;
progressLabel.find('progress').attr('value', percentComplete);
//글 아래쪽에 있는 프로그래스바를 사용하고싶은 경우
//setProgress 과 loading을 progressLabel 대신 사용하면 된다
}
};
return xhr;
},
success: function(data) {
console.log('File upload success.');
},
error: function(xhr) {
console.log('File upload failed.');
}
});
}
로딩 중 화면에 띄워줄 mask와 progress_bar javascript
//프로그래스바
function setProgress(per) {
if(per > 55){
$(".progressPer").css("color", "#000");
}
per = per.toFixed(1);
$(".progressPer").text(per+" %");
$(".progressNow").css("width", "calc(" + per + "% - 20px)");
}
//반투명 마스크
function loading(){
let maskHeight = $(document).height();
let maskWidth = window.document.body.clientWidth;
let mask = "<div id='mask' style='position:absolute; z-index:9997; background-color :#000000; display:none; left:0; top:0;'></div>";
let loading = '';
let loadingLocationX = maskWidth/2 - 100; //화면 중앙에 로딩이미지 띄우기위한 x,y
let loadingLocationY = maskHeight/2 - 100; //이미지 크기에따라 -100 부분조절(테스트했던 이미지가 200*200 이라서 -100)
loading += " <div id='loading'>";
loading += " </div>";
$('body').append(mask);
$("#mask").css({
'width' : maskWidth,
'height' : maskHeight,
'opacity' : '0.5'
});
let progressbar = '';
progressbar += `
<div class="progressContainer" id="progress_div" style='position:absolute; z-index:9998; text-align:center; display:block; margin-top:${loadingLocationY}px; margin-left:${loadingLocationX}px;'>
<h3>검출중입니다</h3>
<div class="progress progressTotal"></div>
<div class="progress progressNow"></div>
<div class="progress progressPer">0 %</div>
</div>
`;
//mask에 세팅한 loading div를 append 후 show
$('#mask').append(loading);
$('#loading').append(progressbar)
$("#mask").show();
}
//로딩 마스크 제거
function closeLoading(){
$('#mask, #loading').hide();
$('#mask, #loading').remove();
}
html 프로그래스바 스타일
<style>
*{margin:0;padding:0} //다른 스타일에 영향줄수 있으니 해당 margin라인은 제거하는 편이 좋음
.progressContainer{position:relative;width: 450px;padding:20px 10px;margin-top: 15px;background:#000;height:40px;}
.progress{position:absolute;width: calc(100% - 20px);height: 40px;}
.progressTotal{background: #5D5D5D;border-radius: 20px;}
.progressNow{width: calc(0% - 20px);background: #FFF;border-radius: 20px;}
.progressPer{background: transparent; text-align:center;color:#A6A6A6; font-size: 25px; font-weight: bold;}
</style>
결과물
글자 위치를 조금 조정해야 할 듯 하다.
필요에 따라 글자위치 색감 등등 을 바꿔 사용하면 좋지 않을까...
만든지 2년이 된 코드인데 이것보다 좋은 코드가 많지만 그래도 직접 만든거니 어쩐지 정이간다
'자바스크립트(jquery)' 카테고리의 다른 글
체크박스 전체선택 및 선택삭제 (0) | 2024.03.22 |
---|---|
javascript에서 formData append 확인법 (0) | 2024.03.22 |
javascript 백슬래시 처리 (0) | 2024.03.22 |
javascript 파일다운로드 (0) | 2024.03.22 |
각종 정규식 체크 (0) | 2024.03.22 |