ckeditor4 사용방법(이미지 업로드)

이전 포스트 참고!

 

jul-liet.tistory.com/169

ckeditor4 사용방법(스프링 게시판 에디터 추천)

---

이번엔 이미지 업로드를 봐보자,,,

1. 현재 이미지 버튼을 누르면 업로드 하는 버튼이 없음!

없다!!!!!!!!!!!

config.js에 값을 추가해보자

	config.filebrowserUploadUrl      = '/upload.do?type=Files',
	config.filebrowserImageUploadUrl = '/upload.do?type=Images',
	config.filebrowserUploadMethod='form'; //파일 오류났을때 alert띄워줌

 

업로드 버튼이 생성되었다!!!!!!!!!!!!!!

 

---

이제 컨트롤러에서 파일 올리고 가져오는 소스를 작성해야한다.

아까 urlconfig.filebrowserUploadUrl 에 작성한 /upload.do에 해당하는 컨트롤러를 작성하자!

 

 

주의사항)

 

* 파일 다운받을때 servlet.xml path설정해줘야함

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

 

 

---

이미지 업로드 하고 ckeditor에 값을 반환해 줘야하는데 최신 버전은 json으로 적용해줘야 오류가 안남

 

1. 스크립트 형식

window.parent.CKEDITOR.tools.callFunction("+callback+",'"+fileUrl+"','파일이 업로드되었습니다.')"+"</script>");

2. json 형식 (1)

printWriter.println("{\"filename\" : \""+fileName+"\", \"uploaded\" : 1, \"url\":\""+fileUrl+"\"}");

3. json 형식 (2)

JsonObject json = new JsonObject();         json.addProperty("uploaded", 1);         json.addProperty("fileName", fileName);         json.addProperty("url", fileUrl);         printWriter.println(json);

---

 

컨트롤러 예시

@RequestMapping(value = "/upload.do", method = RequestMethod.POST)
	public void uploadimg(HttpServletRequest request,HttpServletResponse response, MultipartFile upload) throws Exception {
		logger.info("upload 들어온다! ");
		
		response.setCharacterEncoding("utf-8");
        response.setContentType("text/html; charset=utf-8");
 
        //파일 이름 가져오기
        String fileName=upload.getOriginalFilename();
 
        //파일을 바이트 배열로 변환
        byte[] bytes=upload.getBytes();
 
        //이미지를 업로드할 디렉토리를 정해준다
        String uploadPath="C:\\Users\\eclipse-workspace\\test\\src\\main\\webapp\\ckEimg\\";
        OutputStream out=new FileOutputStream(new File(uploadPath+fileName));
 
        //서버에 write
        out.write(bytes);
        
        //성공여부 가져오기
        String callback=request.getParameter("CKEditorFuncNum");
        
        //클라이언트에 이벤트 추가 (자바스크립트 실행)
        PrintWriter printWriter=response.getWriter(); //자바스크립트 쓰기위한 도구
 
        String fileUrl= request.getContextPath()+"/ckEimg/"+fileName;
       
        if(!callback.equals("1")) { // callback이 1일 경우만 성공한 것
        	 printWriter.println("<script>alert('이미지 업로드에 실패했습니다.');"+"</script>");

        }else {
        	 logger.info("upload img 들어온다! "+fileUrl);
             
             printWriter.println("<script>window.parent.CKEDITOR.tools.callFunction("+callback+",'"+fileUrl+"','이미지가 업로드되었습니다.')"+"</script>");
             
        }
        
        printWriter.flush();
   
	}
	

---

* 이미지파일 이름 안겹치게도 처리해줘야함

 

* img파일 가운데 정렬 없음ㅡㅡ img2다운 받기추가 

 

* multipartFile 공부하기

caileb.tistory.com/152

MultipartFile을 사용한 File 업로드 (multipart/form-data)