엑셀 다운로드 로딩바 만들기2

loadingbar.gif

0.00MB

파일을 다운받을 경우, 용량이 많아서 로딩바가 필요한 경우가 있다.

로딩바 이미지는 파일첨부 했습니다

 

function fn_excelDown(){ //파일 다운버튼을 눌렀을때 호출되는 함수

    setCookie("fileDownload","false"); //쿠키 셋팅 
    blockUI(); //로딩바 호출

    var frm = document.frmFillExcel;

    frm.submit(); //엑셀 파일 다운 폼 

}

function setCookie(c_name,value){

    var date = new Date(1000);

    document.cookie = "fileDownload=; expires="+date.toUTCString()+";path=/";

}

function getCookie(name){

    var parts = document.cookie.split(name+"=");

    if(parts.length == 2){

        return parts.pop().split(";").shift();

    }

}

var downloadTimer;
 
function blockUI() {
    FunLoadingBarStart();
    downloadTimer = setInterval(function() {
        var token = getCookie("fileDownload");
        if(token == "true") {
            unBlockUI();
        }
    }, 1000 );
}

function unBlockUI() {
    FunLoadingBarEnd();
    clearInterval(downloadTimer);
}

 

function FunLoadingBarStart() {

    var backHeight = $(document).height(); //뒷 배경의 상하 폭

    var backWidth = window.document.body.clientWidth; //뒷 배경의 좌우 폭

    var backGroundCover = "<div id='back'></div>"; //뒷 배경을 감쌀 커버

    var loadingBarImage = ''; //가운데 띄워 줄 이미지

    loadingBarImage += "<div id='loadingBar'>";

    loadingBarImage += "<img src='../img/cultivation/loadingbar.gif' />";

    loadingBarImage += "</div>";

    $('body').append(backGroundCover).append(loadingBarImage);

    $('#back').css({ 'width': backWidth, 'height': backHeight, 'opacity': '0.3' });

    $('#back').show();

    $('#loadingBar').show();

}

function FunLoadingBarEnd() {
    $('#back, #loadingBar').hide();
    $('#back, #loadingBar').remove();
}

 

<style>

#back{ position: absolute; z-index: 100; background-color: #000000; display:none; left:0; top:0; width:100%; height:100%}
#loadingBar{ position:absolute; left:50%; top: 40%; display:none; z-index:200; }

</style>

 

java 단에

Cookie cookie = new Cookie("fileDownload", "true");
response.addCookie(cookie);

 

추가해준다.