30. 첨부파일 삭제

첨부파일을 삭제하는 작업은 단순 파일 하나만 삭제하는게 아니라 

 

고려해야하는 점이 있음.

 

1. 이미지 파일은 썸네일까지 같이 삭제

2. 파일을 삭제한 후에는 브라우저에서도 썸네일이나 파일 아이콘이 삭제 처리가 되어야함.

3. 비정상적으로 브라우저 종료시 업로드된 파일의 처리.

 

업로드된 파일의 삭제는 Ajax를 이용하거나 form 태그를 이용하는 방식 모두를 적용할 수 있음.

 

하지만 이미 업로드된 파일의 삭제는 일반 파일의 경우 업로드된 파일만 삭제하면 되는데, 이미지 경우 생성된 썸네일이랑 원본까지 삭제를 해야하는걸 인지해야함.

 

서버에서는 파일의 확장자를 검사하고 일반 파일인지 이미지 파일인지 파악하거나 파라미터로 파일의 종류를 파악해서 처리를 함.

 

일단 화면에서 삭제 기능을 구현하기 위해 uploadAjax.jsp에 코드를 수정.

 

function showUploadFile(uploadResultArr){

    var str = "";

    $(uploadResultArr).each(function(i, obj){

            if(!obj.image){

                var fileCallPath = encodeURIComponent( obj.uploadPath+"/"+obj.uuid+"_"+obj.fileName);

                str += "<li><div><a href='/download?fileName="+fileCallPath+"'>"
                +"<img src='resources/img/attach.png'>"+obj.fileName+"</a>"+
                "<span data-file=\'"+fileCallPath+"\' data-type='file'>x</span>"+"</div></li>"	
            }else{						

                var fileCallPath = encodeURIComponent(obj.uploadPath +"/s_"+obj.uuid+"_"+obj.fileName);

                var originPath = obj.uploadPath+ "\\"+obj.uuid + "_"+obj.fileName;

                originPath = originPath.replace(new RegExp(/\\/g),"/"); 

                str += "<li><a href='javascript:showImage(\"" + originPath + "\")'>" +
                   "<img src='/display?fileName=" + fileCallPath + "'></a>"+
                   "<span data-file=\'"+fileCallPath+"\' data-type='image'> x</span>"+"</li>";

            }
    });
    uploadResult.append(str);
}

 

span 태그를 이용해서 썸네일이나 파일 아이콘 옆에 x 표시를 추가. 그리고 span 태그에 data-file과 data-type 속성을 추가.

 

 

이제 x를 눌렀을때 이벤트 처리도 해줘야함.

 

uploadAjax.jsp

$(".uploadResult").on("click", "span", function(e){
    var targetFile = $(this).data("file");
    var type = $(this).data("type");

    console.log(targetFile);

    // $.ajax() 함수를 이벤트 핸들러 함수 내부로 이동
    $.ajax({
        url : 'deleteFile',
        data : {fileName: targetFile, type: type},
        dataType: 'text',
        type : 'POST',
        success: function(result){
            alert(result);
        }
    }); //$.ajax (파일삭제 ajax)
});



ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

Controller

@PostMapping("/deleteFile")
@ResponseBody
public ResponseEntity<String> deleteFile(String fileName, String type){

    // 파일 삭제를 위해 받은 파일 이름 로깅
    log.info("삭제 하는 파일 이름 : " + fileName);

    // 파일을 객체로 선언함.
    File file;

    try {
        // 파일 경로에서 한글을 디코딩하여 파일 객체 생성함.
        file = new File("c:\\upload\\" + URLDecoder.decode(fileName, "UTF-8"));

        // 파일 삭제
        file.delete();

        // if의 조건 파일 타입이 이미지인 경우
        if(type.equals("image")) {

            // 원본 이미지 파일의 이름을 가져오기 위해 "s_"를 제거하여 대용량 파일 이름 생성함
            String largeFileName = file.getAbsolutePath().replace("s_", "");

            // 대용량 이미지 파일 로깅
            log.info("largeFileName" + largeFileName);

            // 대용량 이미지 파일 객체 생성함
            file = new File(largeFileName);

            // 대용량 이미지 파일 삭제
            file.delete();
        }
    } catch (UnsupportedEncodingException e) {
        // 인코딩 오류가 발생한 경우 로깅 및 NOT_FOUND 응답 반환
        e.printStackTrace();
        return new ResponseEntity<>(HttpStatus.NOT_FOUND);
    }
    // 파일 삭제 완료 응답 반환
    return new ResponseEntity<String>("deleted", HttpStatus.OK);
}

 

먼저 span 태그를 이용해서 처리해야 하지만, 첨부파일의 업로드 후에 생성되기 때문에 이벤트 위임 방식으로 처리함.

 

이벤트 처리에서는 ajax를 이용해서 첨부파일의 경로와 이름, 파일의 종류를 전송함.

 

그리고 서버에서 첨부파일은 전달되는 파라미터의 이름과 종류를 파악해서 처리함.

 

deleteFile()은 브라우저에서 전송하는 파일의 이름과 종류를 파라미터로 받아서 파일 종류에 따라 다르게 동작함.

 

일반 파일의 경우에는 파일만 삭제하고, 이미지의 경우는 썸네일이 존재함.

 

파일 이름의 중간에 s_ 가 들어가기에 일반 이미지도 s_가 없도록 되어 있기에 이 부분을 변경해서 원본 이미지 파일도 삭제 되도록 처리.

 

이걸 브라우저에서 해보면.

 

 

그리고 x를 눌러보면.

 

 

이미지 원본 파일과 썸네일이 같이 삭제되는걸 확인 가능함.

 

나중에 첨부파일 삭제 처리 작업 시 비정상적으로 브라우저를 종료하고 나갔을때의 문제를 해결하는법을 따로 포스팅 하기로함.