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("/prevImage/img/*")
public class ImageAttachServlet extends HttpServlet {

	private static final long serialVersionUID = 1L;

	private final static Logger logger = LoggerFactory.getLogger(ImageAttachServlet.class);
	
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException
    {
    	String sPathInfo = request.getPathInfo();
    
    	if(sPathInfo == null)  {
    		sPathInfo = request.getServletPath();
    	}
        String srchDiv = URLDecoder.decode(sPathInfo.substring(1), "UTF-8");

        //------------------------------------------------------
        // 이미지 처리용
	//------------------------------------------------------
		if("view".equals(srchDiv)){
		//------------------------------------------------------
	        // 이미지 읽어오기
		//------------------------------------------------------						
			try {
				
				String pImgPath = String.valueOf(request.getParameter("imgPath"));
				FileUtil.setPathTraversalPath( pImgPath, FilenameUtils.getName(pImgPath) );
				File fileImg = FileUtil.getPathTraversalFile("FILEPATH", pImgPath, FilenameUtils.getName(pImgPath) );
				
				response.setHeader("Content-Type", getServletContext().getMimeType("filename"));
				response.setHeader("Content-Length", String.valueOf(fileImg.length()));
				response.setHeader("Content-Disposition", "inline; filename=\"" + fileImg.getName().replaceAll("\\r\\n", "")  + "\"");
				
				if(fileImg.exists()) {
					Files.copy(fileImg.toPath(), response.getOutputStream());
					return;
				}
				
			} catch (IOException e) {
				// TODO Auto-generated catch block
				logger.error(ExceptionUtils.getFullStackTrace(e));
			} catch (Exception e) {
				// TODO Auto-generated catch block
				logger.error(ExceptionUtils.getFullStackTrace(e));
			}
			
		}
		//------------------------------------------------------
        
        // 이미지가 없는 경우 처리
    	String fileDir = request.getSession().getServletContext().getRealPath("/web/images/main");
    	String filename = "ico_nodata.png";
    	
    	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());
        } 
    }
}

 

 

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);
            }); 
        }
    });
}