[Spring][쇼핑몰 프로젝트][29] 상품 이미지 수정 - 2(삭제, 재등록)

프로젝트 Github : https://github.com/sjinjin7/Blog_Project
프로젝트 포스팅 색인(index) : https://kimvampa.tistory.com/188

 

목표

이미지 수정 구현

 이미지 수정 페이지에서 이미지를 삭제, 등록하는 작업을 목표로 합니다. ( 상품 등록페이지에 작성하였던 이미지 삭제, 등록 코드를 거의 그대로 사용할 것입니다.)

 

 

 

순서

1. 삭제 버튼

2. 이미지 등록

3. 정리

 

 

 

1. 삭제 버튼

 삭제 버튼이 동작하도록 만들 것입니다. '수정' 페이지 에서의 이미지 등록과 삭제는 '상품 등록' 페이지에서의 등록과 삭제가 동일합니다. 따라서 goodsEnroll.jsp의 삭제 버튼을 동작시키는 자바스크립트 코드를 복사하여 <script> 태그 내부에 붙여 넣어줍니다.

 

※ 앞선 포스팅에서 태그 id속성값에 uploadResult라고 작성을 해야하는데 uploadReslut 오타가 있어서 <div>태그 속성명과 이미지 출력시키는 Javascript코드의 해당 태그를 호출하는 코드를 수정하였습니다. (앞의 포스팅에 수정된 코드를 반영하였습니다.) - 2021.07.14

 

	/* 이미지 삭제 버튼 동작 */
	$("#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("파일을 삭제하지 못하였습니다.")
			}
		});
	}

 

그림 1-1

 

 

 복사 붙여 넣어준 삭제 버튼 동작관련 자바스크립트는 서버에 저장된 실제 파일까지 삭제하는 코드가 삽입되어 있습니다. 따라서 deleteFile() 메서드 구현부를 모두 지워주고 단순 히 이미지 태그와 이미지 정보가 담긴 <input> 태그를 감싸고 있는 <div> 태그("#result_card")를 제거 되도록 동작시켜주는 코드를 작성해줍니다.

 

$("#result_card").remove();

 

 

 

 앞선 포스팅에서 말했듯이 뷰 단계에서는 서버에게 삭제에 대한 요청은 전혀 하지 않고 오직 선택한 이미지를 서버에 저장시키도록 하는 요청만 하도록 할 것입니다. 따라서 위의 코드로 인해 삭제 버튼을 누르게 된다면 사용자는 이미지가 삭제 되어진것 처럼 느낄 수 있도록 이미지가 출력이 되는 태그만 제거가 됩니다.

 

 

 

 

 테스트를 위해서 수정페이지에서 이미지 삭제 버튼을 누르고 취소하였다가 다시 수정 페이지를 가면 삭제가 되지 않고 그대로 출력이 되는 것을 볼 수 있습니다.

 

그림 1-3

 

그림 1-4

 

그림 1-5

 

 

 

2. 이미지 등록

 이미지 등록 코드는 '상품 등록' 페이지에서 작성한 코드를 수정 없이 그대로 사용하시면 됩니다. goodsEnroll.jsp의 이미지 등록 자바 스크립트 코드를 복사하여 수정 페이지(goodsModify.jsp)의 <script> 코드 내부에 붙여 넣어 줍니다.

 

	/* 이미지 업로드 */
	$("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 += "<div id='result_card'>";
		str += "<img src='/display?fileName=" + fileCallPath +"'>";
		str += "<div class='imgDeleteBtn' data-file='" + fileCallPath + "'>x</div>";
		str += "<input type='hidden' name='imageList[0].fileName' value='"+ obj.fileName +"'>";
		str += "<input type='hidden' name='imageList[0].uuid' value='"+ obj.uuid +"'>";
		str += "<input type='hidden' name='imageList[0].uploadPath' value='"+ obj.uploadPath +"'>";		
		str += "</div>";		
		
   		uploadResult.append(str);     
        
	}

 

그림 2-1

 

 

3. 정리

 뷰에서의 처리는 완성하였습니다. 현재 까지 작업한 결과로 인해서 사용자가 새로운 이미지를 등록을 하게 된다면 이미지 출력 태그와 함께 작성된 이미지 정보가 담긴 <input>에 의해서 '상품 정보 데이터'와 함께 '이미지 정보가' BookVO 객체에 담겨 AdminController에 있는 goodsModifyPOST메서드의  인자로 넘겨질 것입니다.

 

 만약 사용자가 기존이미지를 변경되지 않았다면 기존 이미지에 관련한 정보가 BookVO객체에 담겨서 전달될 것입니다. 

 

 그리고 수정페이지에서 기존 이미지를 삭제를 한 후 어떠한 이미지도 등록을 하지 않았다면 이미지 정보가 담겨 있지 않은 BookVO객체가 전달될 것입니다. 

 

 

REFERENCE

• 코드로배우는 스프링 웹 프로젝트(남가람북스)
•  

 

 

 

DATE

• 2020.07.1