ImageAttachServlet :: webapps 외부 폴더 이미지 불러오기

web.xml

<!-- TODO : image preview -->
<servlet>
    <servlet-name>previewImg</servlet-name>
    <servlet-class>com.jiransnc.framework.utils.ImageAttachServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
    <servlet-name>previewImg</servlet-name>
    <url-pattern>/prevImage/img/*</url-pattern>
</servlet-mapping>
<!-- end of image preview -->

 

ImageAttachServlet.java

@WebServlet("/upload/img/*") // 'WebServlet'이 동작안하는 경우 -> web.xml에 servlet설정 'uploadImg' 확인
public class ImageServlet extends HttpServlet {

	private final static Logger logger = LoggerFactory.getLogger(ImageServlet.class);
	private static String sPathInfo = "";
	
	@Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException
    {
    	sPathInfo = request.getPathInfo();
    	if(sPathInfo == null)  {
    		sPathInfo = request.getServletPath();
    	}
    	
        String seq = URLDecoder.decode(sPathInfo.substring(1), "UTF-8");
        //logger.info(">> Attach image function type : " + seq);
        
        ServletContext ctx = request.getSession().getServletContext();
		WebApplicationContext wac = WebApplicationContextUtils.getRequiredWebApplicationContext(ctx);
		CmmnService cmmnService =  wac.getBean(CmmnService.class);
        		
        logger.info(">> Attach image upload fild seq : " + seq);

        try{
    		// DropZone 첨부파일 에서 사용중
        	SearchVO searchVO = new SearchVO();
    		searchVO.setSeq(seq);
    		EgovMap fileMap = cmmnService.select("file.selectFile", searchVO);  
	        
        	String fileDir, fileName = "";
	        if(fileMap != null) {
				fileDir = (String)fileMap.get("fileStrePathNm");
				fileName = (String)fileMap.get("fileStreNm");
				
		        File file = new File(fileDir, fileName);		        
		        if(file.exists()) {
			        response.setHeader("Content-Type", getServletContext().getMimeType(fileName));
			        response.setHeader("Content-Length", String.valueOf(file.length()));
			        response.setHeader("Content-Disposition", "inline; filename=\"" + file.getName() + "\"");
			        
			        Files.copy(file.toPath(), response.getOutputStream());
		        } else {
		        	fileDir = request.getSession().getServletContext().getRealPath("/WEB-INF/images");
		        	fileName = "noimage.jpg";
		        	
		        	File fileNoImg = new File(fileDir, fileName);
		        	if(fileNoImg.exists()) {
				        response.setHeader("Content-Type", getServletContext().getMimeType(fileName));
				        response.setHeader("Content-Length", String.valueOf(fileNoImg.length()));
				        response.setHeader("Content-Disposition", "inline; filename=\"" + fileNoImg.getName() + "\"");
				        
				        Files.copy(fileNoImg.toPath(), response.getOutputStream());
			        } 
		        }
	        } else {
	        	fileDir = request.getSession().getServletContext().getRealPath("/WEB-INF/images");
	        	fileName = "noimage.jpg";
	        	
	        	File fileNoImg = new File(fileDir, fileName);
	        	if(fileNoImg.exists()) {
			        response.setHeader("Content-Type", getServletContext().getMimeType(fileName));
			        response.setHeader("Content-Length", String.valueOf(fileNoImg.length()));
			        response.setHeader("Content-Disposition", "inline; filename=\"" + fileNoImg.getName() + "\"");
			        
			        Files.copy(fileNoImg.toPath(), response.getOutputStream());
		        } 
	        }
        }catch(Exception ex) {
        	logger.error(ex.getMessage());
        }
    }
}

 

 

html

function bannerFiles() {
    var filesHTML = '';

    $.ajax({
        type: 'POST',
        url: '/dashboard/selectBannerFilesList.json',
        dataType: 'json',
        data: {},
        async: true,
        traditional: true,
        success: function (filesInfo) {
            var arr = filesInfo;

            filesHTML += "<swiper-container class='mySwiper' pagination='true' pagination-clickable='true' navigation='true' space-between='30' centered-slides='true' autoplay-delay='3500' autoplay-disable-on-interaction='false'>";

            arr.forEach(function (obj) {

                // 이미지 업로드 경로
                var encodedImgUri = encodeURI(obj.filePath + obj.fileSaveNm + "." + obj.fileExt); 

                var linkUrl = "";
                if(obj.linkUrl !=  undefined) var linkUrl = obj.linkUrl;

                // 이미지 태그를 생성하고 filesHTML에 추가
                filesHTML += "<swiper-slide>";
                filesHTML += "	<div class='swiper-slide'>";    
                filesHTML += "	   <a href='javascript:void(0)'>";
                filesHTML += "		  <img src='/prevImage/img/view?imgPath=" + encodedImgUri + "' data-url='"+ linkUrl +"' style='width: 100%; height: 100%; object-fit: contain;'>";  
                filesHTML += "	   </a>";
                filesHTML += "	</div>";
                filesHTML += "</swiper-slide>";
            });

            filesHTML += "</swiper-container>";	            
            $("#bannerFiles").html(filesHTML);

            var mySwiper = document.querySelector('.mySwiper').swiper; // slide selector
            mySwiper.on('click', function () {
                 var currentSlide = mySwiper.slides[mySwiper.activeIndex]; // 현재 보고있는 slide
                 var url = $(currentSlide).find('img').attr("data-url"); 
                 //console.log(imgTag);
                 if(url != "" ) openWindow(url);
            }); 
        }
    });
}