[javascript] XMLHttpRequest 파일 업로드 진행바 (with Progressbar 부트스트랩 컴퍼넌트)

 

파일을 업로드 진행 상태의 진행바(progressbar) 구현

 

 

진행바는 부트스트랩 콤포넌트를 이용한다.

콤포넌트 · 부트스트랩

 

 

XMLHttpRequest: progress event  를 통해서 진행상태를 리턴받는다.

XMLHttpRequest: progress event - Web APIs | MDN

 

Jquery ajax 와 XMLHttpRequest 를 통한 파일 업로드( Client 구현부)

<script type="text/javascript">

function uploadfile() {

    // 등록할 파일 리스트를 formData로 데이터 입력
    var form = $('#uploadFrm')[0];
    var formData = new FormData(form);
	
    try {
        $.ajax({
        url: "/home/upload",
        data: formData,
        type: 'POST',
        processData: false,		// 파일업로드 false 설정
        contentType: false,		// 파일업로드 false 설정 (multipart/form-data 로 전송)
        dataType: 'json',
        cache: false,
        async:true,
        xhr: function () {

            // ajax 의 업로드 상태를 xhr 객체를 이용하여 상태를 확인 할수 있다.
            var xhr = new window.XMLHttpRequest();
            xhr.upload.addEventListener("progress", function (evt) {
                if (evt.lengthComputable) {
                    var percentComplete = Math.floor((evt.loaded / evt.total) * 100);
                    if (percentComplete >= 100) {
                        $("#uploadText > div").text("업로드 파일 저장중... 잠시만 기다려주세요.")
                    }
                    var percent = percentComplete + '%';
                    var bar = $(".progress-bar");
                    bar.css("width", percent);
                    bar.text(percent);
                }
            }, false);
            return xhr;
        },

        beforeSend: function (xhr, setting) {
            $("#uploadText").show();
        },
        complete: function (xhr, setting) {
        },
        success: function (result) {
            $("#uploadText > div").text("업로드 완료");
        },
        error: function (xhr, status, err) {
            console.log(status)
            console.log(err)
        }

        });
    }
    catch (e) {
        //console.log(e);

    }

}

</script>


<div class="text-center">
    <h1 class="display-4">파일 업로드</h1>
     <form id="uploadFrm" name="uploadFrm" method="post" action = "/home/upload">
        <div>
            <input type="file" name="file"/>		
			<input class="btn btn-primary" type="button" onClick="javascript:uploadfile();" value="업로드" />
        </div>
		 
         <!-- 진행바 -->
		<div class="progress">
		  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
			00%
		  </div>
		</div>
		<!-- text 메시지 -->
		<div id="uploadText" style="text-align:center;margin-top:13px;display:none;">
			<div>파일 업로드 진행중입니다.</div>
		</div>

    </form>
</div>

 

[서버 업로드 부분은 이전 업로드 구현 참고]

[c#] 파일 업로드 asp.net core, webform

 

[asp.net core 대용량 파일 업로드 처리 관련 ]

[asp.net core] 대용량 파일 업로드 사이즈 설정 (with IIS web.config 설정하기)

 

---

업로드 진행바 구현 화면