Ajax를 이용한 파일 처리-4.

Ajax를 이용한 파일 처리-1.

Ajax를 이용한 파일 처리-2.

Ajax를 이용한 파일 처리-3.

지난 포스트까지의 내용을 요약하자면,,

1. 특정 블록에 올려진 파일을 컴퓨터 내 디렉토리에 파일을 저장하고,

2. 일련의 규칙을 통해 정해진 파일명을 Http 상태 코드와 함께 클라이언트에게 리턴해줍니다.

그러면, 이제는 이렇게 비동기적으로 돌려받은 데이터를 화면에 띄워야 하겠죠.

이미지 파일일 경우) 썸네일 이미지를 표시한 후, 원본 파일을 조회하는 링크를 달아줍니다.

그 외 파일일 경우) 정리된 파일명을 표시하고, 다운로드 링크를 달아줍니다.

우선 "POST" 요청에 대한 응답으로 받은 파일명을 뷰 페이지에서 다루어봅시다.

[uploadAjax.jsp]

위 코드를 보시면,,

이미지를 가져올 때 소스와 a 태그 링크 부분에서 "/displayFile"로 "GET" 방식으로 요청을 하는데요.

UploadController가 위 요청을 받으면, 

byte[] 형식의 데이터와 Http 상태 코드를 담은 ResponseEntity<> 객체를 바로 리턴해줍니다.

아래를 보시죠.

[UploadController.java]

이상이 없다면, 아래와 같이 

- 해당 블럭에 파일을 올렸을 때 파일 타입에 따라 링크가 생기고, 

- 클릭시 다운로드가 되거나 원본 이미지 조회가 됩니다.