[Thumbnail 이미지 생성]
1. 원본 이미지를 사용하는 경우 브라우저에 너무 많은 데이터들이 전송되는 문제가 있습니다.
2. 일반적으로 이 문제를 해결하기 위해서 작은 이미지(썸네일, Thumbnail)를 생성해서 처리합니다.
3. JDK 의 ImageIO를 이용할수도 있지만, 해상도 등의 문제로 인해 별도의 라이브러리를 활용합니다.
4. pom.xml에 Thumbnailatior 라이브러리 의존성을 추가합니다.
pom.xml
5. 첨부파일이 이미지 파일인지 판단하여, 이미지 타입이면 썸네일을 생성하도록 합니다.
1. UploadController.java 에 checkImageType(특정한 파일이 이미지 타입인지를 검사하는 메소드)와
기존의 uploadAjaxPost()에 이미지 타입이라면 섬네일을 생성하는 코드를 추가합니다.
UploadController.java
썸네일이 생성되어 잘 저장됨을 확인할 수 있습니다.
속성 값을 확인하면 이미지 사이즈가 작은 것을 확인할 수 있습니다.
[업로드된 파일의 데이터 반환]
1. 업로드 이후에 반환해야 하는 정보는 다음과 같습니다.
1) 업로드된 파일의 이름, 원본 파일의 이름
2) 파일이 저장된 경로
3) 업로드된 파일이 image 인지 아닌지에 대한 정보
2. 이를 위해서 정보들을 객체로 처리하고 JSON으로 전송해야 합니다.
1) 2번을 위해 AttachFileDTO.java 클래스를 생성합니다.
AttachFileDTO.java
2) 기존에 있던 UploadController.java 의 uploadAjaxPost() 메소드를 수정합니다.
(1) JSON 형태로 응답하기 위해 MediaType 설정
ResponseEntity<List<AttachFileDTO>>로 반환형을 상태코드를 반환하도록 합니다.
(2) 업로드된 Data에 대한 정보를 브라우저로 반환하기 위해서 AttacFileDTO 에 List형태로 저장하는 것입니다.
ㄱ) List<AttachFileDTO> list 로 반환될 목록 객체를 생성합니다.
ㄴ) AttachFileDTO가 yyyy/mm/dd(uploadFolderPath)를 저장할 수 있도록 변수를 생성해서 추가합니다
(ㄱ) String uploadFolderPath = getFolder()
ㄷ) 업로드 폴더가 생성이 될 때, AttachFileDTO 객체를 하나 생성합니다.(attachDTO)
ㄹ) 이 객체에 setFileName(uploadFileName)으로 브라우저에서 첨부한 파일이름을 저장합니다.
ㅁ) 이 객체에 setUuid, setUploadPath 로 uuid와 Folder 구조를 저장합니다.
ㅂ) 이 객체에 setImage(true)로 이미지인 경우 , 이미지파일,섬네일 저장을 하도록 합니다.
ㅅ) list.add(attachDTO)로 List에 저장해줍니다. (1개 이상의 업로드가 되니까 List)
(3) 마지막으로 이것을 상태코드와 함께 list 객체를 return 하는 것입니다.
UploadController.java
3. 브라우저에서 Ajax를 처리할 수 있도록 uploadAjax.jsp 의 javascript 부분에 dayaType 을 json으로 받고
결과를 console 로 출력하는 코드를 추가합니다.
uploadAjax.jsp
브라우저의 Response에 잘 전달되었음을 확인할 수 있습니다.(ResponseEntity<List<AttachFileDTO>>
[업로드 후에 업로드 부분을 초기화하고 결과 데이터를 이용해서 화면에 썸네일이나 파일이미지 보여주기]
1. uploadAjax.sjp 의 <input type="file">을 초기화하기 위해
javascript에 .uploadDiv(첨부파일을 추가하는 div class)를 초기화하는 코드를 추가합니다.
1) var cloneObj = $(".uploadDiv").clone() 는 첨부파일을 추가하는 div 를 복사한 것입니다.
(1) 데이터가 전송된 후에 복사한 div가 다시 생성(초기화)될 수 있도록
$(".uploadDiv").html(cloneObj.html()); 를 추가한 것입니다. (이전 첨부파일 정보 제거)
uploadAjax.jsp
결과확인, 파일을 업로드 했을 때, 파일들은 올라가고 Button 정보는 초기화됨을 확인할 수 있습니다.
[업로드된 이미지 처리]
화면에 적절한 섬네일, 파일 이름, 파일 아이콘 등을 보여주어서 결과를 피드백해야 사용자들이 업로드의 결과를 알 수 있을 것입니다.
1. uploadAjax.jsp에 첨부파일의 이름을 목록으로 출력하는 div 영역을 생성합니다.
1) 그 후 javascript 부분에 해당 부분에 대하여 <li>obj.fileName<li>를 생성하는 코드를 작성합니다.
uploadAjax.jsp 첨부파일 List를 보여주는 div 영역 생성
uploadAjax.jsp javacript
결과확인
[일반 파일의 파일 처리]
이미지가 아닌 경우에는 화면에서는 간단한 아이콘 등을 이용해서 첨부파일을 표시하겠습니다.
1. src/resources/img/attach.png 를 생성합니다.
첨부파일
attach.png
2. uploadAjax.jsp 에 css 를 추가합니다.
uploadAjax.jsp
3. uploadAjax.jsp 의 javascript 부분에 showUploadedFile() 메소드에
image 도 같이 출력할 수 있도록 if 문을 수정합니다.
1) !obj.image 는 image 파일이 아닌 일반파일을 의미하고, 아이콘과 파일이름을 같이 출력하겠다는 것입니다.
여기에 해당하지 않는 파일들은 파일이름만 출력하겠다는 것입니다.
uploadAjax.jsp javascript
결과 확인
[섬네일 이미지 보여주기]
파일의 확장자에 따라서 적당한 MIME 타입 데이터를 지정합니다.
1. UploadController.java 에 getFIle() 섬네일 데이터를 전송하는 메소드를 추가합니다.
1) Content-type에 이미지(image/jpg, image/png, image/gif) MIME을 실어주면 이미지로 간주합니다.
https://developer.mozilla.org/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types
MIME 타입 - HTTP | MDN
MIME 타입이란 클라이언트에게 전송된 문서의 다양성을 알려주기 위한 메커니즘입니다: 웹에서 파일의 확장자는 별 의미가 없습니다. 그러므로, 각 문서와 함께 올바른 MIME 타입을 전송하도록, 서버가 정확히 설정하는 것이 중요합니다. 브라우저들은 리소스를 내려받았을 때 해야 할 기본 동작이 무엇인지를 결정하기 위해 대게 MIME 타입을 사용합니다.
developer.mozilla.org
UploadController.java
https://yunzema.tistory.com/186
[개념 정리] http content-type 관한 정리
http 통신으로 api와 연동 혹은 api를 구현할 때, 보편적으로 자주 쓰는 Content-Type, Mime-Type이 있지만, 종류에 대해 한번 정리할 필요가 있어 일단 종류와 개념에 대한 내용 정리한다. content-type이란 간단..
yunzema.tistory.com
결과확인
localhost:8080/display?fileName=2021/06/17/제목.png 를 주소창에 입력하면 화면을 보여주고
localhost:8080/display?fileName=2021/06/17/display.hwp를 주소창에 입력하면 다운로드를 합니다.
이 때, 2021/06/17 폴더 밑에 해당 파일(제목.png, display.hwp)들이 있어야합니다.
2. uploadAjax.jsp 의 Javascript 의 showUploadedFile() 부분에
첨부파일 이름에 대한 인코딩처리(encodeURIComponet)와 썸네일을 보여주는 코드를 작성합니다.
uploadAjax.jsp
썸네일 출력결과 확인
[첨부파일 다운로드]
일반 파일의 경우 클릭 시에 다운로드가 되도록,
이미지 파일의 경우 클릭 시 원본이미지를 보여주도록 하겠습니다.
1. UploadController.java 에 downloadFile() 메소드를 추가합니다.
일반파일을 클릭시 파일을 다운로드하는 메소드입니다.
UploadController.java
upload 파일에 첨부파일을 놓고 주소창에
localhost:8080/download?fileName=일반파일다운.hwp 를 입력했을 때 다운로드가 됨을 확인합니다.
2. IE/Edge 브라우저에서는 첨부파일 다운로드를 할 때 한글이름이 제대로 다운로드 되지 않으므로
이를 해결해주는 Encoding 코드를 작성합니다.(downloadFile())
UploadController.java
3. 이제 이미지를 눌렀을 때 다운로드가 되도록 uploadAjax.jsp 에 해당 코드를 추가합니다.
1) fileCallPath 에 download 주소(URI)를 대입하고 attach.png 이미지에 링크를 걸은 것입니다.
uploadAjax.jsp
2) 지금 상태로 다운로드를 하면 uuid 이름까지 같이 입력이 되므로 downloadFile() 메소드에서 uuid를 제거하고
그 뒤의 이름을 출력하는 코드를 작성합니다.
UploadController.java
결과 확인
4. 이미지 파일을 클릭했을 때, 이미지를 보여줄 수 있도록 <div>와 jQuery의 animate()를 활용합니다.
1) uploadAjax.jsp 의 javascript 부분에 showImage() 메소드를 추가하고,
이미지버튼을 눌렀을 때 showImage()를 호출할 수 있도록 합니다.(+링크)
uploadAjax.jsp javascript showImage()
uploadAjax.jsp javascript showImage() 호출 및 링크
이미지를 클릭했을 때 alert 가 나오면 성공
2) uploadAjax.jsp 에 원본이미지를 보여주는 div 영역을 설정하고 css를 설정합니다.
uploadAjax.jsp 원본이미지 영역 추가
uploadAjax.jsp 원본이미지를 보여주는 css
3) uploadAjax.jsp의 showImage() 메소드의 alert 대신 css의 display를 flex로 바꿔주는 코드를 추가합니다.
uploadAjax.jsp javascript showImage() 수정
결과 확인
4) 이제 이미지를 클릭했을 때 사라지게 하기 위해 uploadAjax.jsp javascript 마지막 부분에
다음 클릭이벤트 메소드를 추가합니다.
uploadAjax.jsp javascript 마지막 부분, bigPictureWrapper 를 클릭했을 때 사라지게(hide()) 한다.
[첨부파일 삭제]
1. 첨부파일 삭제 시 고려해야 하는 사항
1) 이미지 파일의 경우에는 썸네일까지 같이 삭제되어야 하는 점
2) 파일을 삭제한 후에는 브라우저에서도 섬네일이나 파일 아이콘이 삭제되도록 처리하는 점
3) 비정상적으로 브라우저가 종료되었을 때 업로드된 파일의 처리
2. 화면에서의 삭제
1) 첨부파일의 <div> 자체를 삭제
3. 서버에서의 삭제
1) 이미지의 경우에는 섬네일 삭제 / 원본 삭제
2) 일반 파일의 경우에는 원본 삭제
4. 첨부파일이 업로드 후에 생기는 이미지 파일 옆에 'X' 표시를 추가하여 화면에서 삭제기능을 할 수 있게
uploadAjax.jsp javascript showUploadedFile() 메소드에 다음과 같이 추가합니다.
uploadAjax.jsp javascript showUploadedFile() x 표시 추가
x 표시 확인
5. .uploadResult 에 클릭이벤트를 uploadAjax.jsp javascript 에 작성합니다.
uploadAjax.jsp javascript
6. 서버에서 첨부파일을 삭제할 수 있게 UploadController.java에 deleteFile() 를 추가합니다.
1) encode 했던 것을 decode 하고, 파일을 삭제합니다.
2) type 이 image라면 절대경로 에서 s_ 를 바꿉니다.
UploadController.java
x를 눌렀을 때 delete alert 가 나오면서 디렉토리에서 삭제되는지 확인합니다.
