Full Stack Web Developer.
Syaku (샤쿠)

Java, JS (ES6+), Spring, Spring security, jQuery, Reactjs, Bootstrap.

        

08-04 05:26


Spring Boot 2 보기 Front-end 보기 DevOps 보기 Spring 3 보기 Spring Security 3 보기

SWFUpload + CKEditor4 or SmartEditor2 멀티 업로드 그리고 파일 에디터 연동 : 스마트에디터 , 위지윅에디터


written by Seok Kyun. Choi. 최석균

"SWFUpload + CKEditor4 or SmartEditor2"



Github: https://github.com/syakuis/jquery.syaku.file


본 프로그램의 기능은 아래와 같습니다.


SWFUpload 를 이용하여 멀티 파일업로드 UI 를 제공합니다.

첨부된 파일을 에디터에 삽입시킬 수 있게 UI 를 제공합니다.

대표 오픈소스 에디터 CKEditor4 와 네이버 스마트에디터2 를 이용하였습니다.

파일 업로드 데모는 php로 제작하였습니다. 하지만 어떤 언어에도 사용이 가능합니다.


압축 파일에는 에디터 소스는 포함되어 있지 않습니다. 직접 내려받아서 해당 위치에 복사하시면 됩니다.


오픈소스

jQuery : http://jquery.com

SWFUpload : http://swfupload.org

CKEditor4 : http://ckeditor.com/download

Naver SmartEditor2 : http://dev.naver.com/projects/smarteditor/download


CKEditor 4 이상 , SmartEditor 2 이상


- [2014.02.18] syaku.에디터명.upload.html 즉, 에디터 화면의 소스 중에 용량설정 부분 file_size_limit : 용량 * 1024 로 되어있는 부분이 잘못되었습니다. * 1024 를 제거해주세요. (swfupload 용량제한은 kb 단위로 입력하게 되어있습니다.)


- v1.0.2 첨부 파일수가 무제한(0) 인 경우 삭제후 다시 첨부할 수 없는 문제 해결

   최신 버전은 상단에 있는 Github 에서 받으실 수 있습니다.


jquery.syaku.file.v1.0.2.zip


jquery.syaku.file.v1.0.1.zip


jquery.syaku.file.v1.0.0.zip





syaku,ckeditor.upload.html ----> CKEditor4 에디터 화면

syaku,smarteditor.upload.html ----> SmartEditor2 에디터 화면


브라우져에서 실행시키면 됩니다.


syaku.file.js 열어 알맞게 수정합니다.


        upload_url: "syaku.upload.php", // 파일 업로드

        delete_url : "syaku.delete.php" , // 파일 삭제

        flash_url : "./SWFUpload/swfupload.swf", // SWFUpload swf 파일 위치


* 파일업로드 경로 작업


D:/http/files 폴더가 파일 첨부 폴더일 경우

syaku.file.js 파일을 열어 아래와 같이 경로를 수정합니다.

file_folder : '/files' 


또 파일 업로드 처리 페이지에서 폴더를 생성할 경우 리턴하는 xml 노드의 folder 에 경로를 리턴해야합니다.

aaa 폴더를 생성하고 해당 폴더에 업로드된 파일을 저장할 경우 아래와 같이 합니다.

<folder>/aaa</folder>



* 파일업로드 및 삭제 로직 실행 후 리턴할 xml 형식


> syaku.upload.php 파일 참조

error = false 에러 없음 : true 에러 있음


<data>
    <item>
    <error>false</error>
    <message></message>
    <file_orl>디비에 등록된 파일 고유 번호</file_orl>
    <filename>파일 실제명</filename>
    <re_file>파일 변경된 명</re_file>
    <folder>파일 업로드된 경로 폴더</folder>
    <file_size>파일 용량</file_size>
    <extension>파일 확장자명</extension>
    <type>파일형식</type>
  </item>
</data>


* CKEditor 4 화면





* 네이버 스마트에디터2 화면







posted syaku blog

Syaku Blog by Seok Kyun. Choi. 최석균.

http://syaku.tistory.com


  • 태안군 at 2013.10.10 19:26

    스마트에디터2 최신버전으로 한번 사용해봤는데요.

    첨부파일에서 선택을 하고 100%는 되는데, 썸네일이 보이지 않고

    삽입 버튼도 작동이 안됩니다 ㅠ.ㅠ

    뭐 따른 설정이 필요한가요??

  • at 2014.05.07 09:12

    비밀댓글입니다

    • 샤쿠 syaku at 2014.05.07 09:30 신고

      syaku.upload.php 소스를 확인하시면됩니다.
      첨부파일정보는 기본적으로 file_upload 이름을 가지고있습니다.

      $_FILES["file_upload"] 하면 PHP 에서 파일정보를 읽습니다.

      [참고] file_post_name : 'file_upload',

  • 궁금이 at 2014.11.16 10:38


    syaku.file.js 파일에서

    if ( chk.indexOf(".") > -1) {
    ret_size = size.toFixed(2);
    }

    아래와 같이 바꿔야 될것 같습니다.

    if ( chk.indexOf(".") > -1) {
    ret_size = size.toFixed(2);
    }else{
    ret_size = chk;
    }

    수정페이지 onload시 jQuery.syakuFileUpload.size_sum(swfu); 호출하여 첨부파일 총크기 계산될때 0으로 나오는 버그입니다.

    확인 부탁드립니다.

  • 궁리 at 2015.04.06 11:18

    안녕하세요 이거 이미지 업로더 사용해 보려고 테스중인데요~ 파일 얿로드해서 미리보기까지
    되는데요 (첨에 경로 때문에 좀 해메다가) 선택 삭제시 실제 파일은 삭제가 안되는데 직접 만들어야
    하는건지요~ 처리 방법을 알고 싶습니다.
    그리고 에디터에 삽입되는것도 안되는데 어떻게 하는지 알고 싶습니다.~~

    • 샤쿠 syaku at 2015.04.06 18:20 신고

      예제는 php를 이용하여 구현한것이고 삭제는 직접 구현하셔야 합니다. 그리고 php 언어만 사용할 수 있는 스크립트가 아닌 공통 스크립트 입니다.

  • 궁리 at 2015.04.09 09:47

    안녕하세요 질문 한가지 더 드리겠습니다. 게시판에 붙여서 이미지 업로드 후 게시물에 이미지가 반영 되도록 처리 하였습니다.
    문제는 게시물 수정 시에 업로드 했던 이미지들이 업로드 박스에 로디 되야 하는데 그부분은 업로드할 때 쓰는 경로 만 맞으면 되는건지요
    일단 아직 첨부는 DB처리는 하지 않은 상태입니다.

    • 샤쿠 syaku at 2015.04.10 09:18 신고

      서버에 저장된 경로가 맞으면 됩니다.
      기존에 무엇이 저장되었는 지 기록이 있어야하는 데 디비에 저장하지 않고는 노출할 수 없겠죠.
      디비에 저장하시고 해당 데이터를 셀렉트박스 안에 포문으로 <!--
      <option value="{
      file_orl : '파일 번호' ,
      file : '파일명' ,
      re_file : '변경된 파일 명' ,
      folder : '폴더경로' ,
      file_size : '파일사이즈' ,
      extension : '파일 확장자명' ,
      type : '파일 형식'
      }">파일명 (파일용량)</option>
      --> 이런 형태로 넣어주시면 됩니다.

댓글 남기기
◀ PREV 1···119120121122123124125126127···313 NEXT ▶