작업환경
eGovFramework Version : 3.8 Eclipse Version : Oxygen.3a Release (4.7.3a) JDK Version : 1.8 |
1. 파일 업로드
1.1 화면 구성
egovframework에서 파일 업로드 기능을 찾아보면 화면 구현 방법은 2가지로 만들 수 있습니다. 업로드 파일의 최대 개수를 정하고 필요한 만큼만 선택 계속 선택해서 한번에 묶어 보내는 방법과 각각의 파일을 하나씩만 선택 할 수 있도록 file tag를 사용하여 보내는 방법이 있습니다. 첫 번째 방법은 파일의 개수를 정하고 하단이 파일명으로 늘어나는 것을 감안하여 디자인이 되어야 하고, 두 번째 방법은 사용하지도 않을 수 있는 전송할 파일의 수만큼 미리 입력 화면을 고정해야 하는 단점이 있습니다. 간단한 화면 구성을 살펴 보면 아래와 같습니다.
다중 파일 업로드는 파일선택 버튼이 한 개만 존재 하고 이 버튼을 이용하여 파일을 선택하면 하단에 계속해서 파일 리스트가 추가 됩니다. 잘못 선택된 파일이 있다면 delete 버튼으로 삭제 합니다. 그리고 파일 선택이 완료 되었으면 저장 버튼을 이용하여 선택된 파일들을 서버로 전달하면 됩니다.
단일 파일 업로드 방식은 필요한 개수만큼 파일선택 버튼을 추가하고 저장버튼을 클릭하여 선택된 파일들을 서버로 전달 합니다.
파일을 선택한 경우의 화면은 아래 이미지 처럼 보입니다.
다중파일은 이미지 4개를 선택하고 단일파일은 각각 파일을 선택해 보았습니다.
1.2 JSP 파일
1.2.1 다중 파일 업로드
다중 파일 업로드를 구현 하려면 상단에 js 파일을 하나 추가해야 합니다.
<script type="text/javascript" src="<c:url value='/js/egovframework/com/cmm/fms/EgovMultiFile.js'/>" ></script> |
파일을 선택하는 부분은 일반 file tag를 사용하는데 <input type="hidden" name="atchPosblFileNumber" id="atchPosblFileNumber" value="5" /> 이런 식으로 최대 파일 개수를 입력 합니다. 여기서는 5개로 설정 하였습니다.
<input type="hidden" name="savePath" value="Globals.fileTest1Path" /> 이건 파일을 저장하기 위한 위치를 설정하는 부분으로 Server 부분 소스 설명에 나와 있습니다.
선택한 파일을 리스트로 보여주는 부분은 javascript로 구현이 되어 있습니다.
form 에서 최대 파일 개수를 정하지 않았다면 기본값을 설정할 수도 있고 여기서는 3으로 했습니다.
1.2.2 단일 파일 업로드
단일 파일 업로드는 기존에 사용하는 file tag와 동일 하게 테그 하나에 파일 하나를 추가하는 방식으로 JSP 파일을 작성 합니다.
1.3 Server 작업
1.3.1 설정
파일을 저장할 위치를 설정 합니다.
Globals.properties
# 파일 업로드 경로(경로 설정은 반드시 절대경로를 사용해야함, 경로 뒤에 /를 붙여 주어야함.) Globals.fileStorePath =C:/egovframework/upload/ Globals.fileTest1Path =C:/egovframework/upload/filepath1/ Globals.fileTest2Path =C:/egovframework/upload/filepath2/ |
1.3.2 Controller 생성
임의의 controller를 생성하고 화면에서 호출하는 주소를 입력 합니다.
다중 또는 단일 파일 업로드로 화면에서 파일을 보내주면 Server에서는 동일한 로직으로 처리하기 때문에 하나의 함수만 작성하면 됩니다.
파일을 폴더에 저장한 후에는 결과를 2개의 Table에 반영 합니다.
업로드 정보를 저장하고
select * from COMTNFILE;
실제 저장된 파일 정보가 저장 됩니다.
select * from COMTNFILEDETAIL;
단일 업로드도 동일한 방법으로 저장이 됩니다.
2. 파일 다운로드
2.1 jsp 파일
파일 업로드 정보를 담고 있는 테이블에서 ATCH_FILE_ID와 FILE_SN을 param으로 넣어주면 다운로드를 할 수 있습니다.
/cmm/fms/FileDown.do에서 넘겨준 param을 이용하여 FileVO에 담아 상세 정보를 이용하여 원래 파일 명을 찾아 다운로드를 진행 합니다.
3. 전체 파일
3.1 jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="<c:url value='/js/egovframework/com/cmm/fms/EgovMultiFile.js'/>" ></script>
<title>Insert title here</title> <link type="text/css" rel="stylesheet" href="<c:url value='/css/egovframework/com/com.css' />"> </head> <body>
<br> <br> <br>
<h2>다중 파일 업로드</h2> <form name="frm" method="post" action="<c:url value='/file/fileUpload.do'/>" enctype="multipart/form-data" > <input type="hidden" name="atchPosblFileNumber" id="atchPosblFileNumber" value="5" /> <input type="hidden" name="savePath" value="Globals.fileTest1Path" />
<table width="400px" cellspacing="0" cellpadding="0" border="1" > <tr> <td ><input name="file_1" id="egovComFileUploader" type="file" /> <div id="egovComFileList"></div> </td> </tr> <tr> <td align="center"> <input type="submit" value="저장"> </td> </tr> </table> </form>
<!-- 첨부파일 업로드 가능화일 리스트설 Start..--> <script type="text/javascript"> var maxFileNum = document.getElementById('atchPosblFileNumber').value; if(maxFileNum==null || maxFileNum==""){ maxFileNum = 3; } var multi_selector = new MultiSelector( document.getElementById( 'egovComFileList' ), maxFileNum ); multi_selector.addElement( document.getElementById( 'egovComFileUploader' ) ); </script> <!-- 첨부파일 업로드 가능화일 리스트 End.--> <p> <h2>단일파일 업로드</h2> <form id="frm2" action="<c:url value='/file/fileUpload.do'/>" method="post" enctype="multipart/form-data"> <input type="hidden" name="savePath" value="Globals.fileTest2Path" /> <table width="400px" cellspacing="0" cellpadding="0" border="1" > <tr> <td > <input type="file" name="file1" /><br> <input type="file" name="file2" /><br> </td> </tr> <tr> <td align="center"> <input type="submit" value="저장"> </td> </tr> </table> </form>
<p> <p> <p>
<a href="javascript:fn_egov_downFile('FILE_000000000000201','0')"> 파일 다운로드 </a>
<script type="text/javascript">
function fn_egov_downFile(atchFileId, fileSn){ window.open("<c:url value='/cmm/fms/FileDown.do?atchFileId="+atchFileId+"&fileSn="+fileSn+"'/>"); } </script>
</body> </html> |
3.2 Controller
package copycoding.com.util.file.web;
import java.util.List; import java.util.Map;
import javax.annotation.Resource; import javax.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Controller; import org.springframework.ui.ModelMap; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.support.SessionStatus; import org.springframework.web.multipart.MultipartFile; import org.springframework.web.multipart.MultipartHttpServletRequest;
import egovframework.com.cmm.SessionVO; import egovframework.com.cmm.service.EgovFileMngService; import egovframework.com.cmm.service.EgovFileMngUtil; import egovframework.com.cmm.service.FileVO;
@Controller public class FileUploadDownloadController { @Resource(name="EgovFileMngService") private EgovFileMngService fileMngService;
@Resource(name="EgovFileMngUtil") private EgovFileMngUtil fileUtil;
@RequestMapping(value = "/file/fileUpDownloadTest.do") public String daumEditor(ModelMap model) throws Exception { return "copycoding/util/FileUpDownload"; }
@RequestMapping(value = "/file/fileUpload.do") public String uploadSingleFile( final MultipartHttpServletRequest multiRequest, HttpServletRequest request, SessionVO sessionVO, ModelMap model, SessionStatus status) throws Exception{
String storePath = request.getParameter("savePath"); List<FileVO> result = null; String atchFileId = ""; final Map<String, MultipartFile> files = multiRequest.getFileMap();
if(!files.isEmpty()){ // 파일 객체, 구분 값, 파일 순번, 파일ID, 저장경로 result = fileUtil.parseFileInf(files, "upfile_", 0, "", storePath); //파일이 생성되고나면 생성된 첨부파일 ID를 리턴한다. atchFileId = fileMngService.insertFileInfs(result); }
return null; } } |
- copy coding -
'Framework' 카테고리의 다른 글
| eclipse font 변경 (0) | 2019.09.12 |
|---|---|
| 전자정부프레임워크 ARIA 블록 알고리즘 암호화 복호화 (0) | 2019.09.07 |
| spring 전자정부프레임워크 package 다중 생성 (2) | 2019.08.26 |
| eclipse 편집 창 jsp html 미리보기 없애기 (2) | 2019.08.19 |
| [eGovFramework] No bean named 'egovPopupManageIdGnrService' available (0) | 2019.08.17 |
