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

순서

1. 삭제 버튼 태그에 data-file 속성 삽입

2. 삭제 메서드 작성

3. 메서드 적용

4. 테스트

1. 삭제 버튼 태그에 data-file 속성 삽입

업로드 이미지 출력에서 이미지를 업로드하면, 태그가 추가되어 썸네일 이미지가 뷰에 출력되도록 했습니다.

 

새롭게 출력되는 태그들 중 이미지 삭제를 위해 만든 class 속성 값이 imgDeleteBtn인 <div> 태그가 있는데, 해당 태그에 파일 경로 데이터를 data-file 속성을 활용하여 넣었습니다.

data-file 속성의 속성 값은 출력되는 파일 경로입니다. 파일 경로는 이미 UTF-8로 인코딩 해 둔 fileCallPath 변수에 저장했었기 때문에 그대로 사용했습니다.

2. 삭제 메서드 작성

미리 보기 이미지 제거 및 서버에 이미지 파일 삭제 요청을 수행하는 코드를 작성했습니다.

 

해당 기능이 적용되어야 할 상황은 두 가지로 나눠 볼 수 있습니다.

1. 미리 보기 이미지의 'x' 버튼 클릭 시 삭제 수행
2. 이미지를 삭제하지 않은 상태에서 업로드할 파일을 다시 선택했을 때 삭제 수행

두 번째 상황에선 파일 삭제 처리를 해주지 않는다면 두 개의 파일이 저장되게 되고 미리 보기 이미지도 두 개가 출력됩니다. 

 

위의 두 상황 모두 동일한 삭제 처리가 필요하고 중복된 코드 사용을 피하기 위해 삭제 처리를 하는 메서드를 선언하여 이를 호출하는 방식으로 처리했습니다.

---

삭제 메서드가 처리할 작업 순서는 서버에 파일 삭제 요청 -> 서버로부터 응답에 대한 처리입니다.

서버로부터 응답에 대한 처리는 성공할 경우 삭제가 됐기 때문에 미리 보기 태그를 지우는 작업을 수행했고, 실패할 경우 실패했다는 경고가 뜨게 했습니다.

---

<script> 태그 내에 삭제 메서드를 선언합니다.

/* 파일 삭제 메서드 */
function deleteFile(){
		
}

두 개의 변수 선언 후, 하나는 삭제 <div> 태그에 심어둔 썸네일 파일 경로 데이터를 대입하고, 나머지 하나엔 이미지 파일 업로드 시 출력되는 미리 보기 이미지를 감싸고 있는 result_card <div> 태그를 대입합니다.

/* 파일 삭제 메서드 */
function deleteFile(){
		
	let targetFile = $(".imgDeleteBtn").data("file");
		
	let targetDiv = $("#result_card");
		
}

이후 파일 삭제를 요청하는 AJAX 코드를 작성합니다.

/* 파일 삭제 메서드 */
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);
		},
		error : function(result){
			console.log(result);
		}
      });		
}

url : 파일 삭제를 수행하는 url을 작성함.

data : 객체 초기자를 활용하여 fileName 속성명에 targetFile(이미지 파일 경로) 속성 값을 부여했음. 서버의 메서드 파라미터에 String fileName을 선언하였기 때문에 스프링에서 해당 데이터를 매핑.
type : 서버 요청 방식. 'POST'를 지정.
dataType : 전송하는 targetFile은 문자 데이터이기 때문에 'text'를 지정.
success : 성공할 경우 실행되는 속성
error : 요청이 실패 혹은 에러일 경우 실행되는 속성

 

파일 삭제를 성공한 경우, 미리 보기 이미지를 삭제하고 파일 <input> 태그를 초기화해줘야 합니다.

 

success 속성의 속성 값인 콜백 함수 구현부에 result_cartd <div> 태그를 지우고, <input> 태그를 초기화하는 코드를 작성합니다.

또한 파일 삭제 실패의 경우에 경고창을 띄우기 위해 error 속성의 속성 값인 콜백 함수 구현부에 경고창을 띄우는 코드도 작성합니다.

/* 파일 삭제 메서드 */
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("파일을 삭제하지 못하였습니다.")
		}
	});
}

3. 메서드 적용

'X' 버튼을 클릭한 경우 파일 삭제가 동작하도록 하는 메서드를 작성합니다.

 

주의할 점은 아래와 같은 메서드는 'X'를 클릭했을 때 동작하지 않습니다.

$(".imgDeletBtn").click(function(){

});

'X' 버튼이 출력되는 <div> 태그는 웹 페이지가 완전히 렌더링 된 후 JavaScript 코드를 통해 새롭게 출력되는 즉 동적으로 동작하는 태그이기 때문에 on() 메서드를 사용하여 아래와 같이 작성해줘야 합니다.

/* 이미지 삭제 버튼 동작 */
$("#uploadResult").on("click", ".imgDeleteBtn", function(e){
		
});

위의 코드를 조금 더 해석하자면, 기존 렌더링 될 때 추가되어 있는 #uploadResult <div> 태그를 식별자로 하여 그 내부에 있는 imgDeleteBtn <div> 태그를 클릭 시 콜백 함수가 호출된다는 것입니다.

 

콜백 함수 구현부에 앞서 작성한 파일 삭제를 수행하는 메서드를 호출합니다.

/* 이미지 삭제 버튼 동작 */
$("#uploadResult").on("click", ".imgDeleteBtn", function(e){
		
	deleteFile();
		
});

이미지가 등록될 때 이미지 파일이 이미 존재한다면, 삭제 처리 후 서버에 이미지 업로드 요청을 수행하도록 해줘야 합니다.

 

따라서 이미지 등록을 수행하는 메서드인 $("input [type='file']"). on("change", function(e){의 구현부 최상단에 삭제에 대한 코드를 적용해줬습니다.

 

또한 if 문을 활용하여 미리 보기 이미지 태그의 존재 유무에 따라 deleteFile() 메서드를 호출하도록 아래와 같이 코드를 작성했습니다.

/* 이미지 존재시 삭제 */
if($(".imgDeleteBtn").length > 0){
	deleteFile();
}

4. 테스트

위의 두 상황 모두 처리가 잘 되는지 테스트해봅니다.