SmartEditor2 사진첨부기능 이미지업로더 (JSP model1)

뷰페이지에 다음과 같은 스마트에디터가 붙어있다.

<textarea name="contents" id="contents" style="width:100%; height:300px; min-width:500px; display:none;"></textarea>

<script type="text/javascript">

var oEditors = [];

nhn.husky.EZCreator.createInIFrame({

oAppRef: oEditors,

elPlaceHolder: "contents",

sSkinURI: "/program/common/se2/SmartEditor2Skin.html",

fCreator: "createSEditor2"

});

</script>

<script type="text/javascript" src="./quick_photo_uploader/plugin/hp_SE2M_AttachQuickPhoto.js" charset="utf-8"> </script>

굵은 글자 부분을 추가해주고

---

뷰페이지 (스마트에디터가 나오는 페이지)에 스크립트 추가.

// 2013.06.27 위지윅편집기 SmartEditor2 (program/common/se2) 사진첨부기능

function pasteHTML(filepath){ 

        var sHTML = '<span style="color:#FF0000;"><img src="'+filepath+'"></span>'; 

        alert(sHTML); 

        oEditors.getById["contents"].exec("PASTE_HTML", [sHTML]); 

}

'contents' 는 본인이 정한 '스마트에디터 와 Textarea를 이어주는 ID값' 과 같이.

---

photo_uploader/popup 폴더에있는

photo_uploader.html  은  photo_uploader.jsp 로 이름 바꿔주고..

php에서 쓰일 file_uploader.php 처럼

 jsp에서 쓸 file_uploader.jsp 파일을 만들어주자.

---

<photo_uploader.jsp>

// 필요한 페이지 임포트 는 이클립스에서 코딩하다보면 알아서 해주니까 패스

<%@ page errorPage="/program/common/error.jsp" contentType="text/html; charset=UTF-8" %>

<%@ page import="com.oreilly.servlet.MultipartRequest, com.oreilly.servlet.multipart.DefaultFileRenamePolicy, java.util.*, java.io.*"%>

// </style> 태그와 </head> 사이에 추가할 JS

</style>

<script language="javascript">

function fn_imageUp() {

document.editor_upimage.submit();

}

</script>

</head>

...

//생략

...

//<!-- content --> 안쪽에 file_uploader.html 로 submit 되던 action은 새로 만든파일인 file_uploader.jsp 로 바꿔줌

<!-- content -->

<form id="editor_upimage" name="editor_upimage" action="file_uploader.jsp" method="post" enctype="multipart/form-data" onSubmit="return false;">

                    <div id="pop_content2">

<input type="file" class="upload" id="uploadInputBox" name="Filedata">

                        <p class="dsc" id="info"><strong>10MB</strong>이하의 이미지 파일만 등록할 수 있습니다.<br>(JPG, GIF, PNG, BMP)</p>

                    </div>

</form>

<!-- //content -->

<div id="pop_container" class="pop_container" style="display:none;">

    <!-- content -->

//HTML5 지원브라우저에서 다른방식의 업로드를 구현한 부분이다. 나는 HTML5 할줄모르는 2개월차 개발자니까.. 주석처리해버리고 위에 pop_content2 부분꺼 복붙해서 HTML5지원 브라우저건 아니건 무조건 기본방식으로 띄운다.  html5 지원 브라우저는 pop_container를 타고 미지원 브라우저는 pop_container2를 타는데, 둘의 내용을 같게해버림.

  <!-- <div id="pop_content">

       <p class="dsc"><em id="imageCountTxt">0장</em>/10장 <span class="bar">|</span> <em id="totalSizeTxt">0MB</em>/50MB</p>

        [D] 첨부 이미지 여부에 따른 Class 변화 

            첨부 이미지가 있는 경우 : em에 "bg" 클래스 적용 //첨부 이미지가 없는 경우 : em에 "nobg" 클래스 적용  

 

            <div class="drag_area" id="drag_area">

<ul class="lst_type" >

</ul>

            <em class="blind">마우스로 드래그해서 이미지를 추가해주세요.</em><span id="guide_text" class="bg"></span>

            </div>

<div style="display:none;" id="divImageList"></div>

            <p class="dsc dsc_v1"><em>한 장당 10MB, 1회에 50MB까지, 10개</em>의 이미지 파일을<br>등록할 수 있습니다. (JPG, GIF, PNG, BMP)</p>

        </div> -->

                <form id="editor_upimage" name="editor_upimage" action="file_uploader.jsp" method="post" enctype="multipart/form-data" onSubmit="return false;">

                    <div id="pop_content2">

<input type="file" class="upload" id="uploadInputBox" name="Filedata">

                        <p class="dsc" id="info"><strong>10MB</strong>이하의 이미지 파일만 등록할 수 있습니다.<br>(JPG, GIF, PNG, BMP)</p>

                    </div>

</form>

 

        <!-- //content -->

    </div>

...생략...

//<!-- footer --> 안쪽에 첫번째 버튼에 위에서 만들어준  fn_imageUp(); 을 걸어줌

<!-- footer -->

    <div id="pop_footer">

   <div class="btn_area">

            <a href="javascript:fn_imageUp();"><img src="../../img/photoQuickPopup/btn_confirm.png" width="49" height="28" alt="확인" id="btn_confirm"></a>

            <a href="#"><img src="../../img/photoQuickPopup/btn_cancel.png" width="48" height="28" alt="취소" id="btn_cancel"></a>

        </div>

    </div>

<!-- //footer -->

---

<file_uploader.jsp>

<%

String uploadPath = "/uploadfile/smartEditor/";

StringBuffer buffer = new StringBuffer();

String filename = "";

if(request.getContentLength() > 10*1024*1024 ){

%>

<script>alert("업로드 용량(총 10Mytes)을 초과하였습니다.");history.back();</script>

<%

return;

} else {

MultipartRequest multi=new MultipartRequest(request, request.getRealPath(uploadPath), 10*1024*1024, "UTF-8", new DefaultFileRenamePolicy());

java.text.SimpleDateFormat formatter = new java.text.SimpleDateFormat ("yyyy_MM_dd_HHmmss", java.util.Locale.KOREA);

int cnt = 1;

String upfile = StringTo.doNull(multi.getFilesystemName("Filedata"));

if (!upfile.equals("")) {

String dateString = formatter.format(new java.util.Date());

String moveFileName = dateString + upfile.substring(upfile.lastIndexOf(".") );

String fileExt = upfile.substring(upfile.lastIndexOf(".") + 1);

File sourceFile = new File(request.getRealPath(uploadPath) + File.separator + upfile);

File targetFile = new File(request.getRealPath(uploadPath) + File.separator + moveFileName);

sourceFile.renameTo(targetFile);

filename = moveFileName;

%>

<form id="fileform" name="fileform" method="post">

<input type="hidden" name="filename" value="<%=filename%>">

<input type="hidden" name="uploadPath" value="<%=uploadPath%>">

</form>

<%

}

}

%>

<script type="text/javascript">

function fileAttach(){ 

f = document.fileform;

fpath = f.uploadPath.value;

   fname = f.filename.value; 

   fcode = fpath + fname;

   

   window.close(); 

    

   try{

                opener.parent.pasteHTML(fcode); 

   }catch(e){ 

                alert(e); 

   } 

} 

fileAttach();

this.window.close();

</script>

//이건 완전 새로만든 파일이므로 복붙 하면 되겠다.

굵은글자 부분 uploadPath 부분만 본인의 서버 내 폴더로 지정

---

smartEditor 2.3.3 으로 크롬이랑 익스10에서 테스트 했음.

네이버 개발자센터 / 많은 블로그들 / 회사에서 쓰던 코드.. 등등 많이 참조했지만.. 하도 섞이고 새로만든부분도 있고 해서 출처를 적기가 곤란..

소스코드 첨부파일로 붙임.

 문제있는 부분있으면 답글 주시면 삭제 하겠습니다.

file_uploader.jsp

photo_uploader.jsp