From b6fffe5fb101101a2ea666221c48232814d29fda Mon Sep 17 00:00:00 2001 From: SeoJin Kim Date: Wed, 14 Jul 2021 20:13:15 +0900 Subject: [PATCH] =?UTF-8?q?[Spring][=EC=87=BC=ED=95=91=EB=AA=B0=20?= =?UTF-8?q?=ED=94=84=EB=A1=9C=EC=A0=9D=ED=8A=B8][29]=20=EC=83=81=ED=92=88?= =?UTF-8?q?=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=88=98=EC=A0=95=20-=202(?= =?UTF-8?q?=EC=82=AD=EC=A0=9C,=20=EC=9E=AC=EB=93=B1=EB=A1=9D)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit https://kimvampa.tistory.com/236 --- .../WEB-INF/views/admin/goodsModify.jsp | 110 ++++++++++++++++- .../WEB-INF/views/admin/goodsModify.jsp | 111 +++++++++++++++++- 2 files changed, 212 insertions(+), 9 deletions(-) diff --git a/VamPa/src/main/webapp/WEB-INF/views/admin/goodsModify.jsp b/VamPa/src/main/webapp/WEB-INF/views/admin/goodsModify.jsp index d8fbc13..29be4c0 100644 --- a/VamPa/src/main/webapp/WEB-INF/views/admin/goodsModify.jsp +++ b/VamPa/src/main/webapp/WEB-INF/views/admin/goodsModify.jsp @@ -142,7 +142,7 @@
-
+
@@ -322,7 +322,7 @@ /* 기존 이미지 출력 */ let bookId = ''; - let uploadReslut = $("#uploadReslut"); + let uploadResult = $("#uploadResult"); $.getJSON("/getAttachList", {bookId : bookId}, function(arr){ @@ -336,7 +336,7 @@ str += ""; str += "
"; - uploadReslut.html(str); + uploadResult.html(str); return; } @@ -354,7 +354,7 @@ str += ""; str += ""; - uploadReslut.html(str); + uploadResult.html(str); });// GetJSON @@ -611,6 +611,108 @@ }); + /* 이미지 삭제 버튼 동작 */ + $("#uploadResult").on("click", ".imgDeleteBtn", function(e){ + + deleteFile(); + + }); + + /* 파일 삭제 메서드 */ + function deleteFile(){ + + $("#result_card").remove(); + + } + + /* 이미지 업로드 */ + $("input[type='file']").on("change", function(e){ + + /* 이미지 존재시 삭제 */ + if($(".imgDeleteBtn").length > 0){ + deleteFile(); + } + + let formData = new FormData(); + let fileInput = $('input[name="uploadFile"]'); + let fileList = fileInput[0].files; + let fileObj = fileList[0]; + + if(!fileCheck(fileObj.name, fileObj.size)){ + return false; + } + + formData.append("uploadFile", fileObj); + + $.ajax({ + url: '/admin/uploadAjaxAction', + processData : false, + contentType : false, + data : formData, + type : 'POST', + dataType : 'json', + success : function(result){ + console.log(result); + showUploadImage(result); + }, + error : function(result){ + alert("이미지 파일이 아닙니다."); + } + }); + + + }); + + /* var, method related with attachFile */ + let regex = new RegExp("(.*?)\.(jpg|png)$"); + let maxSize = 1048576; //1MB + + function fileCheck(fileName, fileSize){ + + if(fileSize >= maxSize){ + alert("파일 사이즈 초과"); + return false; + } + + if(!regex.test(fileName)){ + alert("해당 종류의 파일은 업로드할 수 없습니다."); + return false; + } + + return true; + + } + + /* 이미지 출력 */ + function showUploadImage(uploadResultArr){ + + /* 전달받은 데이터 검증 */ + if(!uploadResultArr || uploadResultArr.length == 0){return} + + let uploadResult = $("#uploadResult"); + + let obj = uploadResultArr[0]; + + let str = ""; + + let fileCallPath = encodeURIComponent(obj.uploadPath.replace(/\\/g, '/') + "/s_" + obj.uuid + "_" + obj.fileName); + //replace 적용 하지 않아도 가능 + //let fileCallPath = encodeURIComponent(obj.uploadPath + "/s_" + obj.uuid + "_" + obj.fileName); + + str += "
"; + str += ""; + str += "
x
"; + str += ""; + str += ""; + str += ""; + str += "
"; + + uploadResult.append(str); + + } + + + diff --git a/VamPa_MySQL/src/main/webapp/WEB-INF/views/admin/goodsModify.jsp b/VamPa_MySQL/src/main/webapp/WEB-INF/views/admin/goodsModify.jsp index 0cd3904..7246cd0 100644 --- a/VamPa_MySQL/src/main/webapp/WEB-INF/views/admin/goodsModify.jsp +++ b/VamPa_MySQL/src/main/webapp/WEB-INF/views/admin/goodsModify.jsp @@ -143,7 +143,7 @@
-
+
@@ -320,7 +320,7 @@ /* 기존 이미지 출력 */ let bookId = ''; - let uploadReslut = $("#uploadReslut"); + let uploadResult = $("#uploadResult"); $.getJSON("/getAttachList", {bookId : bookId}, function(arr){ @@ -334,7 +334,7 @@ str += ""; str += "
"; - uploadReslut.html(str); + uploadResult.html(str); return; } @@ -352,11 +352,10 @@ str += ""; str += ""; - uploadReslut.html(str); + uploadResult.html(str); });// GetJSON - }); // document ready @@ -610,6 +609,108 @@ }); + /* 이미지 삭제 버튼 동작 */ + $("#uploadResult").on("click", ".imgDeleteBtn", function(e){ + + deleteFile(); + + }); + + /* 파일 삭제 메서드 */ + function deleteFile(){ + + $("#result_card").remove(); + + } + + /* 이미지 업로드 */ + $("input[type='file']").on("change", function(e){ + + /* 이미지 존재시 삭제 */ + if($(".imgDeleteBtn").length > 0){ + deleteFile(); + } + + let formData = new FormData(); + let fileInput = $('input[name="uploadFile"]'); + let fileList = fileInput[0].files; + let fileObj = fileList[0]; + + if(!fileCheck(fileObj.name, fileObj.size)){ + return false; + } + + formData.append("uploadFile", fileObj); + + $.ajax({ + url: '/admin/uploadAjaxAction', + processData : false, + contentType : false, + data : formData, + type : 'POST', + dataType : 'json', + success : function(result){ + console.log(result); + showUploadImage(result); + }, + error : function(result){ + alert("이미지 파일이 아닙니다."); + } + }); + + + }); + + /* var, method related with attachFile */ + let regex = new RegExp("(.*?)\.(jpg|png)$"); + let maxSize = 1048576; //1MB + + function fileCheck(fileName, fileSize){ + + if(fileSize >= maxSize){ + alert("파일 사이즈 초과"); + return false; + } + + if(!regex.test(fileName)){ + alert("해당 종류의 파일은 업로드할 수 없습니다."); + return false; + } + + return true; + + } + + /* 이미지 출력 */ + function showUploadImage(uploadResultArr){ + + /* 전달받은 데이터 검증 */ + if(!uploadResultArr || uploadResultArr.length == 0){return} + + let uploadResult = $("#uploadResult"); + + let obj = uploadResultArr[0]; + + let str = ""; + + let fileCallPath = encodeURIComponent(obj.uploadPath.replace(/\\/g, '/') + "/s_" + obj.uuid + "_" + obj.fileName); + //replace 적용 하지 않아도 가능 + //let fileCallPath = encodeURIComponent(obj.uploadPath + "/s_" + obj.uuid + "_" + obj.fileName); + + str += "
"; + str += ""; + str += "
x
"; + str += ""; + str += ""; + str += ""; + str += "
"; + + uploadResult.append(str); + + } + + +