너무어려웡
502
2017-04-23 16:22:30 작성 2017-04-23 16:29:46 수정됨
1
5939

spring ckeditor 이미지 업로드 관련 도와주세요 ㅠㅠ


<board.jsp>

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%> 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<link href="${ pageContext.request.contextPath }/resources/css/board.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="${ pageContext.request.contextPath }/resources/ckeditor/ckeditor.js">
</script>
<script type="text/javascript" src="${ pageContext.request.contextPath }/resources/js/jquery-1.10.2.js">
</script>
</head>
<body>
<script>
	CKEDITOR.on('dialogDefinition', function (ev) {
        var dialogName = ev.data.name;
        var dialog = ev.data.definition.dialog;
        var dialogDefinition = ev.data.definition;
        if (dialogName == 'image') {
            dialog.on('show', function (obj) {
                this.selectPage('Upload'); });
            dialogDefinition.removeContents('advanced');
            dialogDefinition.removeContents('Link'); }
    });
	 var editor = null;
	jQuery(function() { 
		editor = CKEDITOR.replace('content');
		}
	);
	function form_save(form) {
		editor.updateElement();	
	}
</script>
<div id="wrap">
  <header>
        <%@include file="../header/header.jsp" %>
    </header>   
    <div class="clear"></div>
	<div id="inside">
		<article>			
			<form> 
				<input id='subject' name="subject" type="text" class="search"  style="width:841px; height: 25px; margin-bottom:10px;" placeholder="제목을 입력 하세요">
				<textarea id='content' name='content'></textarea>		
			</form>			
		<div class="clear"></div>    
		</article>
   </div>       
	<div class="clear"></div>         
    <footer>  
        <%@include file="../footer/footer.jsp" %>        
     </footer>
</div>
</body>
</html>


<ckeditor(config.js)>

/**
 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or http://ckeditor.com/license
 */

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
	// config.uiColor = '#AADC6E';
	
	config.language='ko';
	config.resize_enabled = false; // 에디터 크기를 조절하지 않음
	config.enterMode=CKEDITOR.ENTER_BR; // 엔터키를 <br> 로 적용함.
	config.shiftEnterMode=CKEDITOR.ENTER_P; // 쉬프트 + 엔터를 <p> 로 적용함.
	config.toolbarCanCollapse=true;
	config.height='460px';
	config.removePlugins='elementspath'; // DOM 출력하지 않음
	
	config.font_defaultLabel='나눔고딕';
	config.font_names="나눔고딕/나눔고딕,Nanum Gothic,ng;굴림/굴림,Gulim;바탕/바탕,Batang; Arial/Arial";
	config.fontSize_sizes='8/8px;9/9px;10/10px;11/11px;12/12px;13/13px; 14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;26/26px;28/28px;36/36px;48/48px;';
	config.fontSize_defaultLabel='13px';
	// 에디터에 사용할 기능들 정의
	config.toolbar=[ 
		[ 'Source', '-'],
		['Undo', 'Redo' ],
		[ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript'],
		[ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ],
		'/',
		[ 'Styles', 'Format', 'Font', 'FontSize' ],
		[ 'TextColor', 'BGColor' ],
		[ 'Image', 'Flash', 'Link', 'Unlink']
		];
	
	
	config.filebrowserUploadUrl='/atct/board_fileupload.do';
	
};


<FileBean.java>

package vo;

import org.springframework.web.multipart.MultipartFile;

public class FileBean{
	String attach_path,filename,CKEditorFuncNum; 
	MultipartFile upload;

	public String getAttach_path() {
		return this.attach_path;
	} 
	
	public void setAttach_path(String attach_path) { 
		this.attach_path = attach_path; 
	} 
	
	public MultipartFile getUpload() { 
		return upload; 
	} 
	
	public void setUpload(MultipartFile upload) {
		this.upload = upload; 
	} 
	
	public String getFilename() { 
		return this.filename; 
	} 
	
	public void setFilename(String filename) {
		this.filename = filename; 
	} 
	
	public String getCKEditorFuncNum() {
		return this.CKEditorFuncNum; 
	} 
	
	public void setCKEditorFuncNum(String CKEditorFuncNum) {
		this.CKEditorFuncNum = CKEditorFuncNum; 
	}
}


<Controller.java>

package com.ic.atct;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.OutputStream;
import java.io.PrintWriter;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.slf4j.Logger;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;

import dao.BoardDao;
import vo.FileBean;

@Controller
public class BoardController {
	
	public static final String VIEW_PATH = "/WEB-INF/views/sub_menu/";
	
	BoardDao dao;

	@Autowired
	HttpServletRequest request;
	
	@Autowired
	HttpSession session;
	
		
	public BoardController() {
		// TODO Auto-generated constructor stub
	}
	
	public BoardController(BoardDao dao) {
		super();
		this.dao = dao;
	}
	
	@RequestMapping(value = "/board_fileupload.do", method = RequestMethod.POST)
	public String procFileUpload(FileBean fileBean,HttpServletRequest request, Model model) {
		HttpSession session = request.getSession();
		String root_path = session.getServletContext().getRealPath("/"); // 웹서비스 root 경로
		String attach_path = "resources/files/attach/";
		MultipartFile upload = fileBean.getUpload();
		String filename = "";
		String CKEditorFuncNum = "";
		
		if (upload != null) {
			filename = upload.getOriginalFilename();
			fileBean.setFilename(filename);
			CKEditorFuncNum = fileBean.getCKEditorFuncNum();
			try {
				File file = new File(root_path + attach_path + filename);
				upload.transferTo(file);
			} catch (IOException e) {
				e.printStackTrace();
				}
			}
		String file_path = "/atct/" + attach_path + filename;
		model.addAttribute("file_path", file_path);
		model.addAttribute("CKEditorFuncNum", CKEditorFuncNum);
		System.out.println(fileBean.getAttach_path());
		System.out.println(fileBean.getCKEditorFuncNum());
		System.out.println(fileBean.getFilename());
		System.out.println(fileBean.getUpload());
		return VIEW_PATH+"Fileupload.jsp";
		}

}


<Fileupload.jsp>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<script type='text/javascript'>
	window.parent.CKEDITOR.tools.callFunction('${CKEditorFuncNum}', '${file_path}', '파일 전송 완료.');
</script>

<pom.xml> 

<dependency>
			<groupId>commons-fileupload</groupId>
			<artifactId>commons-fileupload</artifactId>
			<version>1.3.1</version>
		</dependency>
		<dependency>
		<groupId>commons-io</groupId>
			<artifactId>commons-io</artifactId>
			<version>2.4</version>
		</dependency>

<servlet-context.xml>

<beans:bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
 		<beans:property name="maxUploadSize" value="100000000" />
		<beans:property name="maxInMemorySize" value="100000000" />
	</beans:bean>


위의 소스로 이미지 전송을 누르면


이런식으로 위에 파일첨부 칸이 공백이 되고

이클립스고 크롬에서도 별다른 오류가 안 나옵니다 ㅠ

그래서 컨트롤러 부분에서 프린트 해보니 값이 null 0 null null 로 출력되는데..


마지막 fileupload.jsp로도 넘어는 가서 크롬으로 소스 확인 해보면

<script type='text/javascript'>

window.parent.CKEDITOR.tools.callFunction('', '/atct/resources/files/attach/', '파일 전송 완료.');

</script>

라고 나오기는 합니다 ㅠㅠ

filebean에 아예 값이 안 들어가는것 같은데 어떻게 집어넣어줘야 할까요 ㅠㅠ

0
  • 답변 1

  • 아로마
    824
    2017-04-24 02:33:28 작성 2017-04-24 02:38:28 수정됨

    1. String file_path = "/atct/" + attach_path + filename;

    업로드시 ckeditor 에 반환 되는 값은 url상 경로입니다.

    보통

    servlet-context.xml 파일에 보면 기본적으로 

    <resources mapping="/resources/**" location="/resources/" />

    처럼 /resources/** 매핑 되어 있죠.

    따라서 원하는 경로를 매핑하려면 

    /atct/ 이경로가 매핑 시켜줘야 합니다. 매핑이 되었는지 그리고

     경로가 확실한 확인 해보세요.


    확인해 보시고 안되면

    다음처럼 변경해보고 테스트 해보세요

    resources 폴더 아래 upload 폴더 하나 만들고

    String file_path = "/resources/upload/"+ filename;

    으로 변경해 보세요. 


    2. return VIEW_PATH+"Fileupload.jsp";


    servlet-context.xml 에 기본적으로 

    <beans:property name="suffix" value=".jsp" />

    설정 되어 있으니

    그리고 .jsp 제거 해야 되지 않을 까 싶습니다.

    실수로 넣은것 같은데요. 

    간혹 이런 실수나 오타하나 때문에 고생을 많이

    할 수도 있는 것 같습니다.

    <beans:property name="prefix" value="/WEB-INF/views/" />

    도 기본적으로 설정되어 있을 테니 

    다음 처럼 해보세요.

    => return "sub_menu/Fileupload";




  • 로그인을 하시면 답변 을 등록할 수 있습니다.