[ jsp ] summernote 이미지 업로드

Kong-al·2022년 11월 9일
0

[ jsp ] summernote

프로젝트를 진행하던 도중 재밌는 기능을 알게되었다.
사용법이 복잡하진 않았지만 검색 중 내가 원하는 결과대로 정리해둔 블로그가 없어 글을 작성한다.
(조각조각 찾으면 방법을 찾을 수 있지만 한번에 정리되어있지 않았다.다 스프링만있고....)

먼저 나는 servlet을 이용한 mvc2 패턴을 사용하였고 수정한 파일은
jsp파일/ frontcontroller / controller / dao / dto / xml
톰캣 server의 server.xml 파일이다.

파일업로드에 사용할 DTO를 먼저 만들어 주었다.

DTO

public class FileDTO {
    private String file_path;
   	private String file_name;
   
    public String getFile_path() {
        return file_path;
    }
    public void setFile_path(String file_path) {
        this.file_path = file_path;
    }
    public String getFile_name() {
        return file_name;
    }
    public void setFile_name(String file_name) {
        this.file_name = file_name;
    }
}

파일 insert / select 할 xml을 만들어준다.

XML

<mapper namespace="File">
	<insert id="insert" parameterType="filedto">
		insert into TBL_FILE (file_path,file_name) VALUES(#{file_path},#{file_name})
	</insert>
	<select id="select" parameterType="string" resultType="filedto">
		select * from TBL_FILE where file_name in (#{file_name})
	</select>
</mapper>

dao에서 xml에서 만든 쿼리를 사용한다.

DAO

// insert
	public boolean Fileinsert(FileDTO fdto) {
		boolean check = false;
		if(sqlsession.insert("File.insert", fdto) != 0) {
			check = true;
		};
		return check;
	}
    
// select
	public FileDTO Fileselect(String file_name){
		return = sqlsession.selectOne("File.select", file_name);
	}

jsp 파일에 summernote를 적용해준다.
보통 div나 textarea에 사용하며 내가 본 대부분의 블로그에서는 textarea에 사용하고있었다.

jsp 파일

<body>
<form action="" method="post" name="boardForm">
	<table>
    	<tr align="center" valign="middle">
			<td><h3>게시판</h3></td>
		</tr>
	</table>

	<table border="1" style="border-collapse: collapse;">
		<tr height="30px;">
			<th align="center" width="150px;">제목</th>
				<td>
					<input name="boardtitle" size="50" maxlength="100" placeholder="제목을 입력하세요.">
				</td>
			</tr>
		<tr height="30px;">
			<th align="center" width="150px;">글쓴이</th>
				<td>
					<input name="username" size="50" maxlength="20" placeholder="이름을 입력하세요.">
				</td>
			</tr>
		<tr height="30px;">
			<th align="center" width="150px;">내용</th>
			<td><textarea name="boardcontents" id="summernote">
				</textarea>
            </td>
		</tr>
	</table>
	<table style="border: 0px;">
		<tr align="right" valign="middle">
        	<td>
				<a href="">[등록]</a>
				<a href="">[목록]</a>
			</td>
		</tr>
	</table>
</form>	
<script>
// 썸머노트
	$('#summernote').summernote({ // summernote를 사용하기 위한 선언
	    height: 350,
		callbacks: { // 콜백을 사용
	   		// 이미지를 업로드할 경우 이벤트를 발생
		    onImageUpload: function(files, editor, welEditable) {
			    sendFile(files[0], this);
			}
       	}
	});
	
	
	function sendFile(files, editor) {
		// 파일 전송을 위한 폼생성
			data = new FormData();
			data.append("uploadFile", files);
				
			$.ajax({
				data: data,
		        type: "post",
		        url: "내가 원하는 url",
		     	// 원래 있던 기능을 막기 위해
		     	cache : false,
		        contentType : false,	
		        processData : false,
		        
		        success : function(data){
		        	$(editor).summernote('editor.insertImage', data.url);
		        }
			});
		}
</script>	
</body>

textarea에 summernote

<textarea name="boardcontents" id="summernote">

</textarea>

jsp 파일에 있는거랑 똑같다

frontcontroller

@WebServlet("*.url경로")
public class 프론트컨트롤러 extends HttpServlet{
	
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) 
			throws ServletException, IOException {
		doProcess(req, resp);
	}
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) 
			throws ServletException, IOException {
		doProcess(req, resp);
	}
	
	protected void doProcess(HttpServletRequest req, HttpServletResponse resp) 
			throws ServletException, IOException {
		String requestURI = req.getRequestURI();
		ActionForward forward = null;
        
        switch(requestURI) {
            case "jsp파일 ajax에서 적은 경로":
            	/*컨트롤러 컨트롤러이름 = new 컨트롤러();
               	컨트롤러이름.execute(req, resp);*/
                IMGUploadAction imgUploadAction = new IMGUploadAction();
               	imgUploadAction.execute(req, resp);
               	break;
        }

나는 컨트롤러를 인터페이스로 구현해 상속받은 후 무조건 이동할 페이지의 경로와 전달방식(forword/redirect) 를 리턴받는 방식으로 만들었다. 하지만 여기서는 페이지 이동없이 ajax로 db값만 받아올것이기 때문에 경로와 전달방식은 받아올 필요가 없다.

controller

public class IMGUploadAction {
	public void execute(HttpServletRequest req, HttpServletResponse resp) throws IOException {
		BoardDAO bdao = new BoardDAO();		// 쿼리를 실행해줄 dao
		FileDTO fdto = new FileDTO();		// db에서 가져온 파일을 담을 dto
		
		MultipartRequest multi = null;
		try {
			multi = new MultipartRequest(req, "C:\\upload", // 업로드 될 경로를 지정
					1000 * 1024 * 1024, // 파일의 크기를 지정(1000메가)
					"UTF-8", // 인코딩 방식
					new DefaultFileRenamePolicy());
		} catch (IOException e) {
			e.printStackTrace();
		}
		
		Enumeration params = multi.getParameterNames();

		while (params.hasMoreElements()) {
			String name = (String) params.nextElement();
			String value = multi.getParameter(name);
		}
		Enumeration files = multi.getFileNames();

		while (files.hasMoreElements()) {
			String file_name = multi.getFilesystemName(name); // 파일 이름 얻기
			String file_path = file.getPath();

			if (file != null) {
			fdto.setFile_path(file_path);
			fdto.setFile_name(file_name);
              if(bdao.Fileinsert(fdto)) {  //  summernote로 받아온 파일 insert
                  JSONObject job = new JSONObject();
                  job.put("url","/upload/"+bdao.Fileselect(file_name).getFile_name());
                  // 저장된 파일 select 해서 json으로 넣어주기
                  // /upload/ 는 server.xml에서 내가 지정해준 경로

                  resp.setContentType("application/json");

                  PrintWriter out = resp.getWriter();
                  out.print(job.toJSONString());
            
            	}
			}
		}
	}
}

톰캣서버는 로컬 폴더로 바로 접근이 불가능하기때문에 경로를 수정해 주어야한다.

sever.xml

    <Host>
		<Context path="/upload/" reloadable="true" docBase="C:/upload"/>
   	</Host>

호스트 안에 context로 경로를 수정해 준다.
docBase에 로컬 폴더 경로를 넣고 path에 내가 톰캣으로 접근할 경로를 작성해준다.
docBase와 path가 연동 되어서 path를 입력하면 docBase에 접근할 수 있다.

profile
웹개발 공부중!(❁´◡`❁)

0개의 댓글