[ 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에 접근할 수 있다.
웹개발 공부중!(❁´◡`❁)