728x90
반응형
파일을 서버에 업로드할 때 파일용량으로 프로그레스 바를 표시하려고 한다.
위와 같은 화면이다.
단순한 필요 요소만 언급하면 아래와 같다.
1. css 파일 필요 (파일명 : progressBar.css)
|
1
2
3
|
.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%; }
|
cs |
2. html 파일에 css 파일 연결
|
1
|
<link rel="stylesheet" href="/css/progressBar.css">
|
cs |
3. html 파일에 progress model 추가
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!-- 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>
|
cs |
4. javascript에서 파일 업로드 시 모달 호출 및 프로그레스 진행
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
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;
}
}
|
cs |
필수적인 요소는 4군데
1) /* progressbar 정보 */ 아래의 3줄
2) $.ajax의 xhr: function() {
3) $.ajax의 beforeSend:function(){
4) $.ajax의 complete:function(){
5. spring의 Controller에서 받을때
|
1
2
3
4
|
@PostMapping(value = "/insertBoard")
public RestResponse<BoardResDTO> insertItem(MultipartHttpServletRequest request, @ModelAttribute BoardReqDTO req) throws Exception {
return new RestResponse<>(serviceClass.insertItem(request, req));
}
|
cs |
여기서 파일받기 위해 필요한 부분은 MultipartHttpServletRequest 입니다.
프로그레스바의 색상등을 변경하고자 한다면 아래 URL 정보를 참조
https://getbootstrap.com/docs/4.4/components/progress/
관련글
1. [spring] java.io.IOException: java.io.FileNotFoundException, multipartfile.transferto(file)
728x90
반응형
'코딩 삽질' 카테고리의 다른 글
| [d3] Line chart sample (0) | 2020.02.07 |
|---|---|
| [javascript, swiper] tab swiper 셈플소스 (0) | 2019.12.19 |
| [java] split에 마침표(dot) 사용하기 (0) | 2019.12.11 |
| [weblogic] 500 에러 (2) | 2019.12.10 |
| [html] include 절대경로, 상대경로 (0) | 2019.11.24 |