블로그 이미지
박공명

카테고리

분류 전체보기 (99)
된장 (7)
Dev (60)
꼐..꼐임 (6)
식탐 (18)
우리 (0)
Etc (8)
개인자료 (0)
Total
Today
Yesterday

세상에 공짜보다 좋은게 없으므로

스프링 프레임워크를 사용한 웹페이지에 네이버 스마트 에디터를 적용하도록 하겟다.

사실 에디터 적용은 잭스도 할수있는일이니 사진 퀵 업로더가 주 내용이다.

나는 개발서버에서의 에디터 위치를 /resource/SE 로 설정하였다.

사실 플러그인 설치와 버튼 추가는 설명도 잘 되있을 뿐더러

이미 적용되어 있더라 ㅡ,.ㅡ 손댈것이 없다.

업로드용 javascript를 수정해야한다.

 

/resource/SE/photo_uploder/popup/attach_photo.js

 

callFileUploader 이건 html5를 사용하지않는 업로드용이라는데 이걸 기준으로 해보겠다.

request를 전송할 주소를 만들어준다.

나는 아래와같은 주소로 POST 형식으로 파일을 받을거다.

sCallback은 스프링에서는 지워줘도 될거같다.

놔둬봐야 쓸모업는 페이지 한번 더읽는거같다.

 

sUrl  : 'http://localhost:8080/web/imageUpload.gm'

 

파일업로드를하는데 대체 어디다 담아올릴건지 확인을 안했다.

사진업로드할때 나오는 팝업인 photo_uploader.html 파일을 살펴보면 Filedata 라는 이름을 찾을수 있다.

이 이름으로 파일을 받아서 저장하고해야하며 또 중요한건 파일을 올릴때 별도의 콜백함수이름을 같이 보내준다는거다.

결론은 파일이름,콜백함수명 두개를 화면으로 다시 가져와야한다.

나는 callBack.jsp 를 새로 만들었다.

 


 @RequestMapping(value = "/imageUpload.gm", method = RequestMethod.POST)
 public String writeBoard(Locale locale, Model model,HttpServletRequest request) {
  logger.info("Welcome imageUpload!! The client locale is {}.", locale);
  
  String filename = "";
  String filenameFront = "";
  String filenameExt = "";
  String convFilename = "";
  FileSystemResource uploadDir = new FileSystemResource("E:/APPLICATION/STC/vfabric-tc-server-developer-2.9.3.RELEASE/base-instance/wtpwebapps/gm_spring_mvc/resources/uploadimages/");
  
  MultipartHttpServletRequest multipart = (MultipartHttpServletRequest) request;
  MultipartFile file = multipart.getFile("Filedata");
  String callBack = multipart.getParameter("callback_func");
  if(!file.isEmpty()) {
   
   filename = file.getOriginalFilename();
   filenameFront = filename.substring(filename.lastIndexOf("."));
   filenameExt = filename.substring(filename.lastIndexOf("."),filename.length());
   //convFilename = Tool.getCurrentDayTimeMill() + filenameExt;
   convFilename = "";
   logger.info("OriginalFilename : {}", filename);
   logger.info("OriginalFilename front : {}", filenameFront);
   logger.info("OriginalFilename ext : {}", filenameExt);
   logger.info("uploadDir : {}", uploadDir.getPath());
   
   try {
    if(file.getSize() > 0){
     File out = new File(uploadDir.getPath() + "/" + Tool.getCurrentDayTimeMill() + filenameExt);
     FileCopyUtils.copy(file.getBytes(), out);
     convFilename = out.getName();
     logger.info("ConvertFilename : {}", convFilename);
    }
   } catch (IOException e) {
    e.printStackTrace();
   }
  
  }

  model.addAttribute("filename", convFilename);
  model.addAttribute("callback_func", callBack);

  return "/util/callback";
 }

 

이러면 파일이 저장된 후 파일이름과 콜백함수명을 callBack.jsp로 뱉어준다.

기존 에디터 샘플에있는 callBack.html 을 내jsp경로(/util/)로 옮겨주고 일부 내용만 수정해준다.

 

var oParameter = {callback_func:"${callback_func}",sFileName : "${filename}",sFileURL : "http://localhost:8080/web/resources/uploadimages/${filename}",bNewLine : true }; // query array

 

뭐 더이상의 설명은 생략한다.

결과물.

 

 

 

 

Posted by 박공명
, |

최근에 달린 댓글

최근에 받은 트랙백

글 보관함