[Spring] 게시판 이미지 및 파일 등록 후 상세보기 페이지에서 해당 파일 다운로드

앞서 이미지 업로드&다운로드&썸네일 메서드와 이어집니다!

해당 다운로드 건은 https://progaming-note.tistory.com/61 상세보기에서 이미지보기 글에서 스크립트 수정만 하였습니다.

 

var bno = ${param.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 style='list-style: none;' data-path='"+attach.uploadPath+"' data-uuid='"+attach.uuid+"' data-filename='"+attach.fileName+"' data-type='"+attach.fileType+"' >";
        str += "<span style='cursor: pointer;'>"+ attach.fileName+"&nbsp;&nbsp;저장</span><br/>";
        str += "</div>";
        str +"</li>";
      }else{
          
        str += "<li style='list-style: none;' data-path='"+attach.uploadPath+"' data-uuid='"+attach.uuid+"' data-filename='"+attach.fileName+"' data-type='"+attach.fileType+"' >";
        str += "<li style='list-style: none;'>"
        str += "<span style='cursor: pointer;'>"+ attach.fileName+"&nbsp;&nbsp;저장</span><br/>";
        str += "</div>";
        str +"</li>";
      }
    });
    
    $(".uploadResult").html(str);       
    
  });//end getjson

기존에 쓰였던 str += "<img src='${path}/display?fileName="+fileCallPath+"'>"; 부분을 

str += "<span style='cursor: pointer;'>"+ attach.fileName+"&nbsp;&nbsp;저장</span><br/>"; 로 수정을 해주었습니다.

 

  $(".uploadResult").on("click","li", function(e){
      
	    console.log("view image");
	    
	    var liObj = $(this);
	    
	    var path = encodeURIComponent(liObj.data("path")+"/" + liObj.data("uuid")+"_" + liObj.data("filename"));
	    
	    if(liObj.data("type") || !liObj.data("type")){
	    	self.location ="/web/download?fileName="+path
	    }
	  });

그리고 이미지 타입이 아닌 텍스트파일 및 .exe파일을 제외한 파일들은 썸네일로 들어간 /s_ 가아닌 일반 uuid에 파일 이름을 저장된 파일을 다운로드 받게 코드를 작성하였습니다.

 

path 변수에 위에서 선언한 fileCallPath 변수의 encodeURIComponent 값에서 uploadpath부분에서 "/s_" 부분을 빼주었습니다.

 

결과화면

이미지 파일 또한 결과화면과 같이 다운로드가 됩니다.