[사전 정보]

 - View에서 파일을 선택할 수 있는 방법

 - 썸네일 이미지를 어떻게 보여줄 것인가

 - 파일을 업로드 할 때 서버에서 해야할 것들, 필요한 라이브러리

 

[파일 업로드 프로토타입 만들기]

 - 파일 선택 후 submit할 때, 파일 업로드가 될 수 있도록 프로토타입을 만듦

 - 일반적으로는 화면에 썸네일 이미지를 노출하기 위해서 비동기로 파일 업로드 한 뒤, 응답 값으로 이미지 경로를 받아 처리한다고 한다.

 - 하지만 여기서는 파일 선택 시 script를 이용하여 createObjectURL를 활용하여 썸네일 이미지를 노출하도록 한다.

파일 업로드 HTML 폼 작성

 

파일 업로드 핸들링 JS 작성

 

파일 업로드 Controller

 

[이미지 파일 외부 경로 설정 방법]

 1. 톰캣 사용할 경우 Server.xml 내에 <Context> 태그 사용하여 프로젝트 외부 폴더를 읽을 수 있도록 하기

 2. addResourceHandlers()에 registry에서 프로젝트 외부 파일 경로를 읽을 수 있도록 하기

 3. 이미지 호출 URL에 대한 Controller를 만들어 사용

 

 

[파일 다운로드 프로토타입 만들기]

 - View 구성

  1. href를 이용하여 '/naver/download?fileName=${파일명 }' url로 controller 호출

 - Controller

 1. 파일명, 파일 전체 경로, 파일 타입, 파일 용량 등을 response에 설정

 2. OutputStream을 통해 파일 쓰기

 

[프로젝트에 적용해야 할 부분]

 - 파일 업로드 시 DB에 파일 경로 저장

 - 업로드 시 thumbnail은 JS 사용

 - 업로드 후 내용 볼 때 섬네일 이미지는 한줄평 이미지의 id 값으로 이미지 호출 controller를 활용하여 thumbnail 출력

 - 다운로드 시 한줄평 이미지의 id 값으로 경로를 가져와 다운로드 작성

+ Recent posts