[Spring][쇼핑몰 프로젝트][26] 업로드 이미지 삭제 - 2

https://kimvampa.tistory.com/226

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>

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>