[html, ajax] bootstrap 파일 업로드 progress bar

파일을 서버에 업로드할 때 파일용량으로 프로그레스 바를 표시하려고 한다.

 

 

위와 같은 화면이다.

 

단순한 필요 요소만 언급하면 아래와 같다.

 

1. css 파일 필요 (파일명 : progressBar.css)

.progress { position:relative; width:100%; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
.bar { background-color: #337ab7; width:0%; height:20px; border-radius: 3px; }
.percent { position:absolute; display:inline-block; top:1px; left:48%; }

 

2. html 파일에 css 파일 연결

<link rel="stylesheet" href="/css/progressBar.css">

 

3. html 파일에 progress model 추가

<!-- progress Modal -->
<div class="modal fade" id="pleaseWaitDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Upload processing...</h3>
            </div>
            <div class="modal-body">
                <!-- progress , bar, percent를 표시할 div 생성한다. -->
                <div class="progress">
                    <div class="bar"></div>
                    <div class="percent">0%</div>
                </div>
                <div id="status"></div>
            </div>
        </div>
    </div>
</div>

4. javascript에서 파일 업로드 시 모달 호출 및 프로그레스 진행

function insertBoard() {
 
    if (fnValidate()) {
 
        if (confirm("저장하시겠습니까?")){
 
            var formData = new FormData($("#writeFrm")[0]);
 
            /* progressbar 정보 */
            var bar = $('.bar');
            var percent = $('.percent');
            var status = $('#status');
 
            $.ajax({
                xhr: function() {
                    var xhr = new window.XMLHttpRequest();
                    xhr.upload.addEventListener("progress", function(evt) {
                        if (evt.lengthComputable) {
                            var percentComplete = Math.floor((evt.loaded / evt.total) * 100);
 
                            /* Do something with upload progress here */
                            var percentVal = percentComplete + '%';
                            bar.width(percentVal);
                            percent.html(percentVal);
 
                        }
                    }, false);
                    return xhr;
                },
                type : 'POST',
                url : getContextPath() + "/admin/board/insertboard.do",
                dataType: 'text',
                data : formData,
                processData : false,
                contentType : false,
                beforeSend:function(){
                    // progress Modal 열기
                    $("#pleaseWaitDialog").modal('show');
 
                    status.empty();
                    var percentVal = '0%';
                    bar.width(percentVal);
                    percent.html(percentVal);
 
                },
                complete:function(){
                    // progress Modal 닫기
                    $("#pleaseWaitDialog").modal('hide');
 
                },
                error:function(request,status,error){
                    alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
                },
                success:function(result, status) {
 
                    alert("저장 되었습니다.");
                    location.href = getContextPath() + "/admin/board/boardList.do?";
                }
            });
 
        } else {
            return;
        }
    } else {
        return;
    }
}

필수적인 요소는 4군데

 1) /* progressbar 정보 */ 아래의 3줄

 2) $.ajax의 xhr: function() {

 3) $.ajax의 beforeSend:function(){

 4) $.ajax의 complete:function(){

 

5. spring의 Controller에서 받을때

@PostMapping(value = "/insertBoard")
public RestResponse<BoardResDTO> insertItem(MultipartHttpServletRequest request, @ModelAttribute BoardReqDTO req) throws Exception {
    return new RestResponse<>(serviceClass.insertItem(request, req));
}

여기서 파일받기 위해 필요한 부분은 MultipartHttpServletRequest  입니다.

 

 

 

프로그레스바의 색상등을 변경하고자 한다면 아래 URL 정보를 참조

https://getbootstrap.com/docs/4.4/components/progress/

 

 

관련글

1. [spring] java.io.IOException: java.io.FileNotFoundException, multipartfile.transferto(file)