매 페이지마다 사진 업로드 할때만 로딩바를 구현하고 싶습니다.

Question

//파일 업로드function add_File(uploadFile) {var form1 = document.editForm;var dataString = $("#searchVO").serialize();var formData = new FormData($("#editForm")[0]);if (confirm("파일을 수정하시겠습니까?")) {var fileSize;if(uploadFile=="pic1" && document.getElementById("imgFile1").value != "") {fileSize = document.getElementById("imgFile1").files[0].size;console.log("pic1")getThumbnail1();}else if(uploadFile=="pic2" && document.getElementById("imgFile2").value != "") {fileSize = document.getElementById("imgFile2").files[0].size;console.log("pic2")getThumbnail2();}else if(uploadFile=="hwp" && document.getElementById("hwpFile").value != "") {fileSize = document.getElementById("hwpFile").files[0].size;getThumbnail3();}else if(uploadFile=="memo" && document.getElementById("memoReportFile").value != "") {fileSize = document.getElementById("memoReportFile").files[0].size;getThumbnail4();}else {alert("업로드 파일을 선택해야합니다.");return false;}$.ajax({type:"POST",url : "",data: dataString,dataType: "json",success: function(data) {if(data.isSuccesed){var fileSize5 = 510241024;var fileSize10 = 1010241024;var fileSize20 = 2010241024;var fileSize30 = 3010241024;var fileSize40 = 4010241024;var fileSize50 = 5010241024;// 기본 지연시간 1초var delayInMilliseconds = 3000;$('#loading').show(); //ajax 실행시 로딩바를 보여준다.setTimeout(function() {alert("파일 업로드가 완료되었습니다.");var tmpDate = new Date();url1 = "/piccc/" + form1[''].value + "." + form1[''].value + "?";url2 = "/piccc/" + form1[''].value + "." + form1[''].value + "?";$("#").attr("src", url2 + tmpDate.getTime());$("#").attr("src", url1 + tmpDate.getTime());location.reload()}, delayInMilliseconds);}else{alert("파일 업로드 중 오류가 발생하였습니다.");self.close();}}});}}function getThumbnail1(){var form = $("#searchVO");var option = {url : "/fac/candidate/uploadImg1.do",success: showResponse // post-submit callback};form.ajaxForm(option).submit();}function getThumbnail2(){var form = $("#searchVO");var option = {url : "/fac/candidate/uploadImg2.do",success: showResponse // post-submit callback};form.ajaxForm(option).submit();}function showResponse(responseHtml) {var responseHtml = responseHtml.replace(/\/i, '').replace(/\/i, '');var response = $.parseJSON(responseHtml);if(response.isSuccesed){$("#imgTemp").attr("src", "/common/api/getImage.do?width=120&height=120&idx="+response.imgIdx);//$("#jangbiMaster\.imgIdx").val(response.imgIdx);}}function checkImg(args){var flag = true;var form = document.editForm;var ext = args.value;var type = ext.substr(ext.length-3);var imgFileSize = args.files[0].size;var fileSize = 510241024;if(!(type=="jpg" || type=="JPG" || type=="png" || type=="PNG" || type=="bmp" || type=="BMP")){if(ext!="") alert("jpg, png, bmp 파일만 업로드 가능합니다.");args.value="";flag = false;return flag;}if(imgFileSize > fileSize){alert("업로드 최대용량은 5MB 미만입니다.");args.value="";flag = false;return flag;}if (args.name == 'imgFile1') {var filepath = form['facFieldVO.mapLc'];filepath.value = type;console.log(filepath)}else{var filepath = form['facFieldVO.mapStu'];filepath.value = type;console.log(filepath)}return flag;}function clickCheck(element) {el_name = element.nameconst checkbox = document.getElementsByName(el_name)checkbox.forEach((cb) => { cb.checked = false; })element.checked = true;}$(document).ready(function(){$('#loading').hide(); //첫 시작시 로딩바를 숨겨준다.})

덤엔더머 · Answer

로딩바는 어렵겠습니다.로딩바 표시 준비하다가 파일 업로드 끝날 것 같습니다.ajax 시작할 때 로딩 표시 종료 할 때 로딩 표시 종료는 어떨까요?

자바국비뻐꾸기 · Answer

저도 윗분 말씀이랑 동감이용로딩바를 로딩하는 속도보다 사진 업로드 속도가 더 빠를거같아요.고용량의 파일이 아니고서야...

매 페이지마다 사진 업로드 할때만 로딩바를 구현하고 싶습니다.

2개의 답변

Q&A 목록