순서 1. 삭제 버튼 태그에 data-file 속성 삽입 2. 삭제 메서드 작성 3. 메서드 적용 4. 테스트 1. 삭제 버튼 태그에 data-file 속성 삽입 업로드 이미지 출력에서 이미지를 업로드하면, 태그가 추가되어 썸네일 이미지가 뷰에 출력되도록 했습니다. 새롭게 출력되는 태그들 중 이미지 삭제를 위해 만든 class 속성 값이 imgDeleteBtn인 태그가 있는데, 해당 태그에 파일 경로 데이터를 data-file 속성을 활용하여 넣었습니다. data-file 속성의 속성 값은 출력되는 파일 경로입니다. 파일 경로는 이미 UTF-8로 인코딩 해 둔 fileCallPath 변수에 저장했었기 때문에 그대로 사용했습니다. 2. 삭제 메서드 작성 미리 보기 이미지 제거 및 서버에 이미지 파일 삭제 ..
순서 1. 방향성 2. 메서드 작성 1. 방향성 이미지 삭제 기능을 수행하는 URL 매핑 메서드를 작성했습니다. 이미지 파일 삭제를 위해 가장 핵심이 되는 메서드는 File 클래스의 delete() 메서드입니다. 해당 메서드를 사용하기 위해선 File 클래스를 인스턴스화 하여 사용해야 합니다. 삭제할 파일을 대상으로 하는 File 객체를 생성하기 위해 생성자에 대상 파일의 경로인 문자열 데이터를 파라미터로 부여해야 합니다. 따라서 삭제할 대상의 파일 경로가 필요하기 때문에 URL 매핑 메서드의 파라미터로 파일 경로인 fileName을 부여했습니다. 파일 삭제를 수행하는 URL 매핑 메서드는 뷰에서 비동기 방식으로 요청을 하고 수행 결과를 반환하기 때문에 비동기 요청을 수행하도록 작성했습니다. 비동기 요청..
순서 1. 태그 추가 및 CSS 설정 추가 2. 이미지 출력 메서드 작성(showUploadImage()) 3. 사용자가 정의한 값 즉 이미지만 선택할 수 있도록 태그에 속성 추가 4. encodeURIComponent() 메서드 적용 1. 태그 추가 및 CSS 설정 추가 업로드 파일 선택 태그 바로 아래 업로드 한 이미지를 볼 수 있도록 코드를 추가했습니다. 이후 CSS 설정을 추가했는데, 따로 작성하지 않고 해당 insertProduct.jsp 파일에 바로 추가했습니다. 2. 이미지 출력 메서드 작성(showUploadImage()) AJAX success 속성의 콜백 함수에 전달받은 이미지 데이터를 활용하여 이미지가 출력되도록 코드를 작성했습니다. 작성할 코드량이 많았기 때문에 콜백 함수 내부에 작..
순서 1. 전체 방향 2. URL 매핑 메서드 작성 및 File 객체 생성 3. 'Content Type' 명시 및 데이터 파일 변환 4. 테스트 1. 전체 방향 '파일 경로(유동 경로)' + '파일 이름' 데이터를 파라미터로 전달받고, 해당 데이터에 맞는 이미지 파일을 찾아 뷰(VIEW)에 이미지 데이터를 전송했습니다. 이미지 파일을 주고받기 위한 데이터 타입은 byte 배열(byte [])로 했습니다. 이미지 파일은 바이너리 파일 범주에 들어가기 때문입니다. URL 매핑 메서드의 반환 타입은 ResponseEntity 객체를 사용했습니다. ResponseEntity의 경우 HTTP response 메시지의 header와 status를 조작할 수 있기 때문입니다. 이미지 출력 메서드 구현 방식 파라미터..
