[JavaScript] summernote 사용법(2부)

이제 summernote에서 본문에 이미지 업로드 하는 부분 입니다.

 

1부에 올렸던 내용중에 callbacks 부분에 uploadSummernoteImageFile() 입니다.

function uploadSummernoteImageFile(file, editor) {

    data = new FormData();

    data.append("file", file);

    $.ajax({

        url : "/test/uploadSummernoteImageFile",

        dataType: 'json',

        processData: false,

        contentType: false,

        method: 'POST',

        data: data,

        cache: false,

        success : function(data) {

            $('#contents').summernote('editor.insertImage', data.url);

        }

    });

}

 

 

이제 컨트롤러 부분을 보겠습니다.

@RequestMapping(value= "/ad/uploadSummernoteImageFile")

@ResponseBody

public Map<String, Object> uploadSummernoteImageFile(HttpServletRequest request, @RequestParam("file") MultipartFile multipartFile) {

       

    Map<String, Object> mapResult = null;

 

    try {

        mapResult = FileUpload.uploadSummernoteFile(multipartFile, null);

        if (mapResult == null || mapResult.get("url") == null) {

            throw new BizException("파일업로드에 실패했습니다.");

        }

           

        mapResult.put("url", "사용하시는 도메인/notice" + mapResult.get("url").toString());

    } catch (BizException e) {

        log.warn(e.getMessage(), e);

    } catch (Exception e) {

        log.error(e.getMessage(), e);

    }

       

    return mapResult;

}

 

public static Map<String, Object> uploadSummernoteFile(MultipartFile mpf, Map<String, Object> paraMap) throws Exception {

        Map<String, Object> rstMap = new HashMap<String, Object>();

        Calendar cal = Calendar.getInstance();

       

        String path = File.separator + cal.get(Calendar.YEAR) + File.separator;

        String osName = System.getProperty("os.name");

        if(osName == null) osName = "other";

        osName = osName.toLowerCase();

        String uploadPath = "/data/test" + path;

        if (osName.startsWith("windows")) {

            uploadPath = uploadPath.replaceAll("/","\\\\");

            uploadPath = System.getProperty("user.dir") + "/data/test" + path;

        }

        String imgPath = uploadPath;

        File imgDirPath = new File(imgPath);

        if (imgDirPath.exists() == false) {

            imgDirPath.mkdirs();

        }

        String fileName = getFileName();

        mpf.transferTo(new File(imgPath + fileName));

       

        rstMap.put("file_id", fileName);

        rstMap.put("url", path.replaceAll("\\\\","/") + fileName);

       

        return rstMap;

    }

 

위와같은 방식으로 하면 년도별로 저장하게 됩니다.

 

이제 summernote에서 이미지 넣는게 가능해집니다.