3. 특정 경로에 있는 파일명(file list) 읽어오는 기능 + Ajax로 동적으로 이미지 로딩(Dynamic)

이번 실습에서는 특정경로에 있는 파일명을 읽어오는 기능을 구현해보도록 하겠습니다.

 

fileMngSys_admin.js

 

 

DispatcherServlet.java

 

 

admin_WebSourcePage.jsp

 

 

admin_WebSourcePage.jsp 에서 EL/JSTL을 이용하여, 세션에 담겨진채 넘겨받은 데이터를 for문으로 출력해주면 됩니다.

하지만 이번 실습에서는 Ajax를 이용하여 동적으로 이미지를 로딩하도록 바로 구현해보도록 하겠습니다.

 

 

 

fileMngSys_admin.js

 

 

DispatcherServlet.java

DispatcherServlet를 경유하도록 작성할 수도 있지만 이번 실습에서는 javascript단에서 처리하도록 구현할 것이므로 주석처리하도록 하겠습니다.

 

 

image.json

 

 

admin_WebSourcePage.jsp

 

 

결과화면

 

 

 

파일첨부

https://drsggg.tistory.com/303

[토이 프로젝트/(2019) Admin FileManagementSystem] 파일첨부1

 

 

 

 

 

** 20191121

경로 및 파일명을 json파일에서 읽어오는게 아니라

실제 서버에서 불러오도록 수정

 

 

JSP파일

<%@page import="org.json.simple.JSONArray"%>
<%@page import="org.json.simple.JSONObject"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.util.*" %>
<%@ page import="java.io.*" %>

<%
	response.setContentType("application/json");
	response.setCharacterEncoding("UTF-8");

	JSONObject jsonObjRtn = new JSONObject();
	JSONArray jsonArr = new JSONArray();
	
	String[] imageFilterArr = {"jpg", "jpeg", "png"};
	String filepath = "";
	String imgpath = "";
	
	try {
		filepath = request.getSession().getServletContext().getContext("/biz").getRealPath("") + "/700_FileMngSys/image";
		// ex) "C:/Users/TY/Desktop/workspace/workspace_20190611/BoardWeb/src/main/webapp/700_FileMngSys/image";
		imgpath = request.getRequestURL().toString().replace(request.getRequestURI().toString(), "") + "/biz/700_FileMngSys/image";
		// ex) "http://127.0.0.1:8080/biz/700_FileMngSys/image";
		
		// 파일 경로 확인 후 폴더가 없다면 새로 생성
		File dirFile = new File(filepath);
		File[] fileList = dirFile.listFiles();
		
		int cnt = 0;
		for(File tempFile : fileList) {
			
			String tempFileName = tempFile.getName();
			String tempPath = tempFile.getParent();
			tempPath = imgpath;
			
			// 현재 이미지가 eclipse 폴더 내에 존재함
			//tempPath = "image";
			
			// 이미지 파일이 맞는지 정합성 체크
			int tempIdx = 0;
			tempIdx = (tempFile.toString()).lastIndexOf(".");
			String temp = "";
			temp = (tempFile.toString()).substring(tempIdx + 1);
			
			// 이미지 파일인 경우에만 다음로직 진행
			for (int i = 0; i < imageFilterArr.length; i++) {
				if(temp != null && temp != "" && (imageFilterArr[i].toString()).equals(temp.toLowerCase())) {
					JSONObject jsonObj = new JSONObject();
					jsonObj.put("title", tempFileName);
					
					tempPath += "\\" + tempFileName;
					jsonObj.put("url", tempPath);
					
					jsonArr.add(jsonObj);
					cnt++;
				}
			}
		}
		
		// 이미지 파일인 경우에만 다음로직 진행
		if(cnt > 0) {
			jsonObjRtn.put("images", jsonArr);
		}
		
	} catch(NullPointerException e){
		System.out.println("파일이 없습니다.");
	} catch(Exception e){
		e.printStackTrace();
	}
	
	
	if(jsonObjRtn != null) {
		System.out.println("jsonObjRtn=" + jsonObjRtn.toString());
		response.getWriter().print(jsonObjRtn.toString());
	}
	

%>

 

 

 

JS파일

// json의 이미지목록을 읽어서 화면에 출력
function drawImageContainer() {
//	$.ajax({
//		url : 'image/image.json',
//		type : 'GET',
//		dataType : 'json',
//		success : function(data) {
//			createImages(data);
//			//이미지 클릭시 파일 삭제하는 기능
//			clickDeleteImage();
//		}
//	});
	
	fn_getImageFileList();
}

//이미지 파일을 화면에 출력하는 기능 
function fn_getImageFileList() {
	// 이미지 출력
	
	$.ajax({
		url: 'service/getImageFileList.jsp',
		type: 'POST',
		async: false,
		cache:false,
		data: {
		},
		error: function(jqxhr, textstatus, error) {
			console.log(textStatus+ '\n' + +error);
			if(textStatus=='parsererror'){
				console.log(jqxhr.responseText);
			}
		},
		success: function(data) {
			//JSON 포멧 데이터 처리
			if(data != null) {
				createImages(data);
			}
		}
	});
	return false;
}

//JSON 포멧 데이터 처리 
function createImages(objImageInfo) { 
	var images = objImageInfo.images; 
	var strDOM = ""; 
	for (var i = 0; i < images.length; i++) { 
		// N번째 이미지 정보를 구하기
		var image = images[i];
		
		image.url.replace(/\\/gi, '/');
		
		// N번째 이미지 패널을 생성
		strDOM += "<div class='imagePanel' id='" + image.title + "'>"; 
		strDOM += "<img src=" + image.url +">"; 
		strDOM += "<p class='title'>" + image.title + "</p>"; 
		strDOM += "</div>"; 
	} 
		// 이미지 컨테이너에 생성한 이미지 패널들을 추가하기
		var $imageContainer = $("#image_container"); 
		$imageContainer.append(strDOM); 
}

 

 

정상출력 확인!