[Spring] 브라우저에서 파일 업로드 후 처리 (썸네일 처리 등)

[Spring] 브라우저에서 파일 업로드 후 처리 (썸네일 처리 등)

이전 글

2021.08.24 - [Spring] - [Spring] Ajax 파일 업로드 후, 업로드된 파일 데이터 반환

2021.08.24 - [Spring] - [Spring] 썸네일 이미지 생성

2021.08.24 - [Spring] - [Spring] 파일 업로드, 파일명 중복 방지를 위한 UUID 적용

2021.08.24 - [Spring] - [Spring] 년월일 폴더 생성, 날짜 폴더 생성

2021.08.24 - [Spring] - [Spring] 파일 확장자, 파일 사이즈 확인하여 파일 업로드 제한하기

2021.08.23 - [Spring] - [Spring] Ajax를 이용하는 파일 업로드

2021.08.22 - [Spring] - [Spring] 파일 업로드 설정하기 (xml방식, Java방식)

 

지난 글에서 파일 저장 후 브라우저에서 서버로부터 반환 받은 파일 정보를 콘솔창에서 확인하는 것까지 진행했습니다.

지난 글 캡처 이미지

데이터는 JSON 객체로 반환된 것을 확인할 수 있고, 브라우저에서는 다음 작업을 처리합니다.

 

- 업로드 후에 업로드 부분을 초기화 시키는 작업

- 결과 데이터를 이용해 화면에 썸네일이나 파일 이미지를 보여주는 작업

---

<input type="file'>의 초기화

<input type='file'>은 다른 DOM 요소들과 조금 다르게 readonly라 안쪽의 내용을 수정할 수 없기에 다른 방법으로 초기화 시킵니다.

 

uploadAjax.jsp 수정

<input type='file'> 오브젝트가 담긴 <div>를 복사(clone)해둡니다. 첨부파일을 업로드한 뒤에 복사된 객체를 <div> 내에 다시 추가해 첨부파일 부분을 초기화시킵니다.

화면에서 첨부파일을 추가하고 업로드하면 첨부파일을 다시 추가할 수 있는 형태로 변경되는 것을 확인할 수 있습니다.

---

업로드된 파일 처리

파일 업로드 후 JSON 형태로 얻어왔기 때문에 이를 이용해서 화면에 적절한 썸네일을 보여주거나 화면에 파일 아이콘 등을 보여주어서 결과를 피드백해줄 필요가 있습니다. Ajax의 처리결과를 보여주도록 수정합니다.

 

결과를 보여줄 div를 추가합니다.

uploadAjax.jsp 수정

js에서 목록을 보여주는 부분을 별도의 함수로 처리합니다.

showUploadFile( )은 JSON 데이터를 받아서 해당 파일의 이름을 추가합니다. Ajax 결과에서는 받은 JSON 데이터를 showUploadFile( )을 호출하도록 수정합니다.

실행 결과

---

일반 파일의 파일 처리

일반 파일이 업로드 된 경우 보여줄 이미지를 아래 경로에 넣습니다.

 

webapp > resources > img (없으면 생성) > attach.png (무료 이미지)

uploadAjax.jsp에서 일반 파일의 경우 attach.png 이미지가 보이게 수정합니다.

(css 작업은 제외했습니다.)

 

uploadAjax.jsp 수정

showUploadFile( )은 이미지 파일이 아닌 경우에 파일 아이콘을 보여주는 형태로 작성됩니다.

---

썸네일 이미지 보여주기

서버에서 썸네일은 GET 방식을 통해 가져옵니다. 특정한 URI 뒤에 파일 이름을 추가하면 이미지 파일 데이터를 가져와서 <img> 태그를 작성합니다.

 

UploadController에서 썸네일 데이터 전송하기 - 메서드 추가

getFile( )은 파일 경로가 포함된 fileName을 파라미터로 받고 byte[ ]를 전송합니다. byte[ ]로 이미지 파일 데이터를 전송할 때 신경 쓰이는 것은 브라우저에 보내주는 MIME 타입이 파일의 종류에 따라 달라지는 점입니다. 이를 해결하기 위해 Files.probeContentType( )을 이용해 적절한 MIME 타입 데이터를 Http의 헤더 메시지에 포함할 수 있도록 처리합니다.

 

 

이미지를 띄울 폴더에 이미지 파일 넣고, 브라우저에 URL을 직접 입력해 테스트할 수 있습니다.

 

/display?fileName=2021/08/25/제니.jpg

---

Javascript 처리

encodeURIComponent( )를 이용해 공백이나 한글 이름에 대한 문제를 처리할 수 있습니다. encodeURIComponent( )를 이용해 URI 호출에 적합한 문자열로 인코딩 처리합니다. (브라우저 간 일관성 유지)

브라우저에서는 이미지 종류의 파일을 업로드한 경우 썸네일 이미지가 보이게 됩니다. 

---

[Spring] 브라우저에서 파일 업로드 후 처리(썸네일 처리 등) 에 대해서 알아보았습니다.