[Spring][커뮤니티 사이트]게시판 상세보기 에서 이미지 보기

• 우선 상세보기 화면에서 사용자들이 올린 이미지를 보기 위해서는 getAttachList()를 통해서 확인 할 수 있다.
• 코드가 수정 되는 부분은 없으며, jsp 파일에서 스크립트가 하나 추가 시켜주면 된다.

1.JSP(상세보기)

       <tr>
         <td class="uploadResult">
           	<ul></ul>
         </td>
        </tr>

• 작성.jsp 부분과 똑같이 uploadResult class를 가진 태그를 선언 해준다

JS(상세보기)

$(document).ready(function(){
  
  (function(){
  
    var bno = '<c:out value="${detail.bno}"/>';
    
    $.getJSON("${path}/board/getAttachList", {bno: bno}, function(arr){
        
       console.log(arr);     
       var str = "";
       
       $(arr).each(function(i, attach){
       
         //image type
         if(attach.fileType){
           var fileCallPath =  encodeURIComponent( attach.uploadPath+ "/s_"+attach.uuid +"_"+attach.fileName);
           
           str += "<li data-path='"+attach.uploadPath+"' data-uuid='"+attach.uuid+"' data-filename='"+attach.fileName+"' data-type='"+attach.fileType+"' ><div>";
           str += "<img src='${path}/display?fileName="+fileCallPath+"'>";
           str += "</div>";
           str +"</li>";
         }else{
             
           str += "<li data-path='"+attach.uploadPath+"' data-uuid='"+attach.uuid+"' data-filename='"+attach.fileName+"' data-type='"+attach.fileType+"' ><div>";
           str += "<span> "+ attach.fileName+"</span><br/>";
           str += "<img src='${path}/resources/img/attach.png'></a>";
           str += "</div>";
           str +"</li>";
         }
       });
       
       $(".uploadResult").html(str);       
       
     });//end getjson
    
  })();//end function
  
});

• 우선 .ready()를 통해 상세보기 페이지에 들어오면 바로 나오게끔 스크립트를 시작하였습니다.
• 여기서는 Ajax가 아닌 getJsoN을 사용 하여 외부 JSON 데이터를 가져왔습니다.
• getJSON은 GET 방식 요청을 통해 서버로부터 받은 JSON 데이터를 로드 하는 것이며, JSON DATA를 읽어오는 ajax라 생각하시면 된다.
• 이미지 파일을 읽은 매핑값(주소값) 과 데이터 값(파라미터 값) 을통해 함수를 만든다.
• fileCallPath 변수를 만들어서 uri의 파라미터값들의 정보를 변수에 저장 한 후 매개변수 attach에다가 값을 집어 넣어 줬다. 파일 업로드 처리에서 display(썸네일 부분)의 주소값을 들고와서 img 주소로 설정 해준다.
• 만약 이미지가 제대로 안뜬다면 따로 설정한 이미지 파일로 대체하여 보여주게 하였다.

결과화면