[JSP] 파일업로드 로딩 화면 샘플 소스 DEMO

css

/* pop_up */
.pop_wrap { overflow:visible; position:absolute; top:50%; left:50%; display:none; margin-left:-200px; z-index:999; }
.pop_wrap .bg { background:#000; opacity:.5; filter:alpha(opacity=50); width:100%; height:100%; position:fixed; left: 0;top:0; } 
.ly_pop { position:relative; z-index:10; padding:20px; border:2px solid #777; background:#fff; text-align:center;  font-weight:700;}
.ly_pop p { margin:20px 0; padding:20px 0; background:#eaeaea; text-align:center; }
.pop_btn a { display:inline-block; padding:5px 30px; font-size:16px; border:1px solid #ccc; border-radius:3px; }

 

 

header.jsp

<%--접수시 업로딩 --%>
<div id="uploading" class="pop_wrap" style="top:250%;">
    <div class="bg"></div>
    <div class="layer_pop2">
        <p class="percent"><span id="progress">75</span></p>
    </div>
</div>

 

js

function layer_open(el, val){
    var temp = $('#' + el);        //레이어의 id를 temp변수에 저장
    var bg = temp.prev().hasClass('bg');    //dimmed 레이어를 감지하기 위한 boolean 변수

    if(bg){
        $('.pop_wrap').fadeIn();
    }else{
        temp.fadeIn();
    }

    if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');
    else temp.css('top', '0px');
    if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');
    else temp.css('left', '0px');

    /*
    temp.find('a.cbtn, a.cbtn2').click(function(e){
        if(bg){
            $('.pop_wrap').fadeOut();
        }else{
            temp.fadeOut();
        }
        e.preventDefault();
    });
    */

    $('.pop_wrap .bg').click(function(e){
        $('.pop_wrap').fadeOut();
        e.preventDefault();
    });

    $('.pop_btn a').click(function(e){
        $('.pop_wrap').fadeOut();
        e.preventDefault();
    });

}

 

fileupload.js

function fileUpload(fileObject, type) {

        var max = 10;
        
        
        var fName = $(fileObject).prop("name");
        var index = fName.substring(fName.length-1,fName.length);
        var productType = $(':input[name=productType' + index + ']:radio:checked').val();
        var type = "";
        
        switch (productType) {
        /* case "2" :
        case "3" :
            type = "img";
            break; */
        default :
            type = "";
            break;
        }
        
       
       if(!fileCheck(fileObject, type)){ 
          delWorks(fileObject);
          return false;
       }
       if(!fileSizeCheck(fileObject, max)) {
          delWorks(fileObject);
          return false;
       }
        
        fnResultInitialize();
        
        var formData = new FormData();
        var files = fileObject.files;
        for (var i = 0; i < files.length; i++) {
            formData.append($(fileObject).attr('name'), files[i]); //업로드한 파일을 하나하나 읽어서 FormData 안에 넣는다.
        }
        
        var callUrl = "/worksUpload.do";
        var xhr = new XMLHttpRequest();
        xhr.open("POST", callUrl, true);
        xhr.upload.onprogress = function(e) {
            layer_open1("uploading");
            var percentComplete = (e.loaded / e.total) * 100;
            progress.innerText = " " + parseInt(percentComplete) + "%";
            if(percentComplete == 100){
                setTimeout(function() {$('.pop_wrap').fadeOut()}, 2000);
            }
        };
        xhr.onload = function() {
            var callStatus = xhr.status;
            if(callStatus == 200){
                var json = JSON.parse(xhr.responseText);
                var target = json.fileName + '_fileIdx';
                $('[name="' + target + '"]' ).val(json.fileIdx);
                frmObj.target.value = json.fileIdx;
            }else {
                alert("오류가 발생했습니다.");
            }
        };
        xhr.send(formData);
        
    }