From e1794281ff46aabbb1f086a751ebbf3932b8c412 Mon Sep 17 00:00:00 2001
From: SeoJin Kim <sjinjin7@gmail.com>
Date: Wed, 2 Jun 2021 19:16:29 +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][26]=20=EC=97=85=EB=A1=9C?=
 =?UTF-8?q?=EB=93=9C=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=82=AD=EC=A0=9C=20?=
 =?UTF-8?q?-=202?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

https://kimvampa.tistory.com/226
---
 .../WEB-INF/views/admin/goodsEnroll.jsp       | 42 +++++++++++++++++-
 .../WEB-INF/views/admin/goodsEnroll.jsp       | 43 ++++++++++++++++++-
 2 files changed, 82 insertions(+), 3 deletions(-)

diff --git a/VamPa/src/main/webapp/WEB-INF/views/admin/goodsEnroll.jsp b/VamPa/src/main/webapp/WEB-INF/views/admin/goodsEnroll.jsp
index e25ef9f..69fa890 100644
--- a/VamPa/src/main/webapp/WEB-INF/views/admin/goodsEnroll.jsp
+++ b/VamPa/src/main/webapp/WEB-INF/views/admin/goodsEnroll.jsp
@@ -521,6 +521,11 @@ $("#enrollBtn").on("click",function(e){
 	/* 이미지 업로드 */
 	$("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;
@@ -590,7 +595,7 @@ $("#enrollBtn").on("click",function(e){
 		
 		str += "<div id='result_card'>";
 		str += "<img src='/display?fileName=" + fileCallPath +"'>";
-		str += "<div class='imgDeleteBtn'>x</div>";
+		str += "<div class='imgDeleteBtn' data-file='" + fileCallPath + "'>x</div>";
 		str += "</div>";		
 		
    		uploadResult.append(str);     
@@ -598,6 +603,41 @@ $("#enrollBtn").on("click",function(e){
 	}	
 	
 	
+	/* 이미지 삭제 버튼 동작 */
+	$("#uploadResult").on("click", ".imgDeleteBtn", function(e){
+		
+		deleteFile();
+		
+	});
+	
+	/* 파일 삭제 메서드 */
+	function deleteFile(){
+		
+		let targetFile = $(".imgDeleteBtn").data("file");
+		
+		let targetDiv = $("#result_card");
+		
+		$.ajax({
+			url: '/admin/deleteFile',
+			data : {fileName : targetFile},
+			dataType : 'text',
+			type : 'POST',
+			success : function(result){
+				console.log(result);
+				
+				targetDiv.remove();
+				$("input[type='file']").val("");
+				
+			},
+			error : function(result){
+				console.log(result);
+				
+				alert("파일을 삭제하지 못하였습니다.")
+			}
+		});
+	}
+	
+	
 </script> 				
 
 </body>
diff --git a/VamPa_MySQL/src/main/webapp/WEB-INF/views/admin/goodsEnroll.jsp b/VamPa_MySQL/src/main/webapp/WEB-INF/views/admin/goodsEnroll.jsp
index 51e2e6c..a44485b 100644
--- a/VamPa_MySQL/src/main/webapp/WEB-INF/views/admin/goodsEnroll.jsp
+++ b/VamPa_MySQL/src/main/webapp/WEB-INF/views/admin/goodsEnroll.jsp
@@ -465,6 +465,11 @@ $("#enrollBtn").on("click",function(e){
 	/* 이미지 업로드 */
 	$("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;
@@ -533,12 +538,46 @@ $("#enrollBtn").on("click",function(e){
 		
 		str += "<div id='result_card'>";
 		str += "<img src='/display?fileName=" + fileCallPath +"'>";
-		str += "<div class='imgDeleteBtn'>x</div>";
+		str += "<div class='imgDeleteBtn' data-file='" + fileCallPath + "'>x</div>";
 		str += "</div>";		
 		
    		uploadResult.append(str);     
         
-	}		
+	}	
+	
+	/* 이미지 삭제 버튼 동작 */
+	$("#uploadResult").on("click", ".imgDeleteBtn", function(e){
+		
+		deleteFile();
+		
+	});
+	
+	/* 파일 삭제 메서드 */
+	function deleteFile(){
+		
+		let targetFile = $(".imgDeleteBtn").data("file");
+		
+		let targetDiv = $("#result_card");
+		
+		$.ajax({
+			url: '/admin/deleteFile',
+			data : {fileName : targetFile},
+			dataType : 'text',
+			type : 'POST',
+			success : function(result){
+				console.log(result);
+				
+				targetDiv.remove();
+				$("input[type='file']").val("");
+				
+			},
+			error : function(result){
+				console.log(result);
+				
+				alert("파일을 삭제하지 못하였습니다.")
+			}
+		});
+	}	
 	
 </script>