---

Ajax 이미지 가져오기 연습

---

• 데이터 타입 검색 사이트
  • https://developer.mozilla.org/ko/

---

이미지 처리 원리 설명

• <img> 태그는 절대경로가 안 된다. 상대경로만 가능하다.
• 때문에 하드 디스크 안에 있는 이미지 태그를 src경로로 잡으려면 경로와 이름을 알려주는 URL요청을 적는다.
• 이미지 태그에서 보낸 URL요청은 Controller가 받는다.
• Controller는 자바이기 때문에 파일객체를 이용해서 접근이 가능하다.
• 이미지를 바이트 배열로 응답한다.
• 응답 할 때 응답 데이터가 바이트 배열이라고 ResponseEntity로 감싸서 반환 처리한다.

이미지 처리 경로 요약

• URL요청(자바측으로 요청) ‣ 컨트롤러가 받음 ‣ 파일객체로 접근 ‣ 바이트 배열로 ‣ 응답 ‣ 이미지 표시

• "application/octet-stream"
  • 이진 데이터(0, 1) 자체를 의미한다.
  • Java에서는 byte 타입의 데이터를 의미
• encodeURIComponent()
  • 자바스크립트 인코딩 함수
  • 파라미터를 주소창에 붙여서 처리할 때 인코딩 할 수 있는 방법

---

예제

---

JSP

Ajax 4

<script>

  // 호출
  $(function(){
	fnImage();
  })
 
  // 정의
  function fnImage(){
	$('#btn_image').click(function(){
	  var path = encodeURIComponent('D:\\GDJ69\\assets\\image');
	  var filename = $('#image').val();
	  $('#display').empty();  // 초기화(empty는 이미지 태그만 지움)
	  $('#display').append('<img src="${contextPath}/ajax4/display.do?path=' + path + '&filename=' + filename + '" width="192px">'); // 이미지 경로 : 요청 url
	})
  }

태그

  <%-- HDD에 저장된 이미지를 표시하기 --%>

  <div>
    <select id="image">
      <c:forEach var="n" begin="1" end="10" step="1">
        <option>animal${n}.jpg</option>
      </c:forEach>
    </select>
    <button id="btn_image">이미지 가져오기</button>
  </div>
 
  <hr>
 
  <div id="display"></div>

---

컨트롤러

Ajax Controller 4

@Controller
public class AjaxController4 {

  // 서비스 생략하고 컨트롤러에서 직접 반환
 
  @GetMapping(value="/ajax4/display.do", produces="application/octet-stream")  // "application/octet-stream" : 이진 데이터(0, 1) 자체를 의미한다. (Java에서는 byte타입의 데이터를 의미)
  public ResponseEntity<byte[]> display(@RequestParam("path") String path
                                      , @RequestParam("filename") String filename) {
   
    ResponseEntity<byte[]> responseEntity = null;
   
    try {
     
      // File 객체
      File file = new File(path, filename);
     
      // File 객체를 byte[]로 변환하는 Spring 클래스
      byte[] b = FileCopyUtils.copyToByteArray(file);
     
      // ResponseEntity 객체 생성
      responseEntity = new ResponseEntity<byte[]>(b, HttpStatus.OK);
     
    } catch (Exception e) {
      e.printStackTrace();
    }
    return responseEntity;
  }
}

---

👉Spring Ajax 멀티미디어 가져오기 활용 예제 전체(깃허브 클릭)

---

---