CodeIgniter

파일 업로드 & CKEditor

수업소개

이번 수업에서는 오픈소스 위지윅 에디터인 CKEditor을 이용해서 파일을 서버로 전송하고, 전송된 데이터를 CI의 upload 라이브러리 클래스로 받아서 저장하는 방법에 대해서 알아본다. 이 과정에서 위지윅 에디터를 적용하는 방법에 대해서도 익힐 수 있다. 순수 HTML을 이용해서 파일을 업로드 하는 방법은 CodeIgniter의 메뉴얼을 참고한다. 

선행지식

Upload Class

초기화

CodeIgniter의 업로드 클래스는 더 적은 코드로 더 안전하게 파일을 전송 할 수 있는 방법을 제공하고 더 많은 경우에 대한 예외처리를 제공한다. 이 클래스를 초기화 할 때는 아래와 같이 한다. 

// 사용자가 업로드 한 파일을 /static/user/ 디렉토리에 저장한다.
$config['upload_path'] = './static/user';
// git,jpg,png 파일만 업로드를 허용한다.
$config['allowed_types'] = 'gif|jpg|png';
// 허용되는 파일의 최대 사이즈
$config['max_size'] = '100';
// 이미지인 경우 허용되는 최대 폭
$config['max_width']  = '1024';
// 이미지인 경우 허용되는 최대 높이
$config['max_height']  = '768';
$this->load->library('upload', $config);

파일저장

 upload 클래스의 핵심 메소드는 do_upload이다. 이것을 실행하면 서버로 전송된 파일의 보안 취약점을 점검하고 문제가 없으면 지정된 디렉토리로 파일을 이동시킨 후에 실행 결과를 리턴한다. 아래와 같이 사용한다. 

$field_name = "some_field_name";
$this->upload->do_upload($field_name)

$file_name 값은 file type의 폼에서 지정한 name 값과 일치해야 한다. 예를들면 아래와 같아야 한다. 

<input type="file" name="some_field_name" />

CKEditor

CKEditor는 위지윅 에디터다. 위지윅(WYSIWYG)이란  What You See Is What You Get 한국어로는 보는데로 얻는다는 뜻으로, HTML 코드 없이 포맷을 편집할 수 있는 기능을 제공하는 에디터다. CKEditor는 무료고 오픈소스로 사용할 수 있는 대표적인 위지윅 에디터다. 

CKEditor을 설치하기 위해서는 다운로드 받아야 한다. 아래 주소를 방문해서 최신버전을 다운로드 받자. 

다운받은 파일을 /static/lib 디렉토리에 풀고 위지윅 에디터가 필요한 페이지에 textarea를 만든 후에 CKEditor 파일을 페이지에 로드한다.  그리고 textarea와 CKEditor를 자바스크립트로 연결해주면 간단하게 설치가 완료된다. 아래는 최소한의 코드다.

<html>
    <head>
        <script src="/static/lib/ckeditor/ckeditor.js"></script>
    </head>
    <body>
        <form>
            <textarea name="description">            
            </textarea>
            <script>
                CKEDITOR.replace( 'description' );
            </script>
        </form>
    </body>
</html>

 이미지 업로드 기능 활성화

CKEditor에서 이미지 업로드 기능을 활성화시키기 위해서는 CKEditor를 textarea에 연결할 때 옵션 값을 전달해야 한다. 위의 코드를 아래와 같이 수정한다. 

<script>
    CKEDITOR.replace( 'description', {
        filebrowserUploadUrl: '/topic/upload'
    });
</script>

툴바 중에 이미지 버튼을 누르고 업로드 탭을 선택한 후에 파일을 전송하면 /topic/upload로 파일이 전송된다. /topic/upload는 CKEditor가 전송한 파일을 받아서 보안 취약점을 점검한 후에 문제가 없으면 파일을 저장한다. 

업로드 후 처리

업로드 정보를 받아서 처리한 /topic/upload 는 CKEditor에 업로드한 파일을 삽입 할 수 있도록 미리 약속된 callback 함수를 호출해야 한다. callback의 형식은 아래와 같다. 

<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction('콜백의 식별 ID 값', '파일의 URL', '전송완료 메시지')</script>
  • 콜백의 식별 ID 값 : CKEditor가 파일을 전송할 때 자동으로 'CKEditorFuncNum'라는 GET 타입의 데이터를 전송한다. 이 값을 그대로 사용하면 된다. 
  • 파일의 URL : 저장된 파일에 접근 할 수 있는 URL. CKEditor는 이 값을 이용해서 이미지를 본문에 저장한다.
  • 전송완료 메시지 : 전송된 결과를 사용자에게 보여주는 메시지

예제

예제 코드가 많아짐에 따라서 본문에 포함시키기가 어려워지고 있다. 따라서 앞으로는 github의 링크를 걸도록 하겠다. 

태그

참고

댓글

댓글 본문
작성자
비밀번호
  1. 장루피나
    localhost에서 작업하면 이미지 업로드가 안되나요?
  2. 정수리형
    강의 잘보고있습니다!! 많은 도움이 되요~!!
    그런데 이미지 업로드를 구현 한 후에 테스트를 해 보니, 파일은 업로드가 되는데, '전송완료 메시지'가 안뜨고, '예'를 눌러봐도 '이미지 소스 url이 없습니다'라는 메시지를 띄웁니다. 서버에서 파일을 받았는지 확인해보면 파일은 있구요. 주소창에 직접 url을 쳐서 들어가도 이미지가 출력됩니다. ck에디터상에서만 url을 못 따오는 것 같은데... 무엇이 문제일까요?
  3. JustStudy
    고맙습니다
  4. 잘보고 갑니다.
  5. 고맙습니다.
    대화보기
    • http://ckeditor.com......on7

      가능합니다.
      대화보기
      • $this->load->library('upload', $config);

        이부분이 무엇인가요?
      • uglyducklin
        github에 있는 파일을 그대로 다운받아 서버에 적용해봤는데요.

        The configuration file does not exist. 라는 문구가 나오는 이유는 무엇때문일까요 ㅠㅠ
      • Frank
        ckeditor 회사에서도 사용 가능한가요?

        CKEditor is distributed under the GPL, LGPL and MPL Open Source licenses.

        http://ckeditor.com......nse
      • will
        크롬브라우저에는 레이아웃 맞게 ck에디터가 잘들어갑니다.
        그러나 파이어폭스브라우저에서는 레이아웃이 자꾸 깨집니다.
        해결법은 잘모르겠습니다~
        참고들 하셔야할듯
      • 청아
        하....감사합니다
      • 양갱이
        안녕하세여 저는 지금 ckeditor를 이용해 홈페이지를 만들고 있는 사람입니다
        다름이 아니라 ckeditor로 이미지 올리기는 성공하였는데 파일을 올리고 싶습니다 이미지는 잘 올라가는데 파일이 올라가지 안더군요
        이미지랑 파일을 단순히 올리는 것 뿐만 아니라 사람들이 다운받아서 쓰는 기능도 만들어야 하는데 여기 ckeditor에서 할 수 없나요?
        저는 자바에서 개발을 하고 있고 jsp를 쓰고 있습니다
        사람들이 다운로드 받을 수 있게 하는 것도 구현하고 싶습니다
        도움을 주시면 감사하겠습니다 : )
      • 태양이
        오타있네요~
        $file_name 값은 file type의 폼에서 지정한 name 값과 일치해야 한다. 예를들면 아래와 같아야 한다.
        =>
        '$field_name' 값은 file type의 폼에서 지정한 name 값과 일치해야 한다. 예를들면 아래와 같아야 한다.
      • egoing
        그건 직접 구현하셔야 합니다:)
        대화보기
        • chobo
          upload 클래스를 이용해서 aws s3로 올릴수는 없을까요...?
        • jio1122
          정말감사합니다
        • 포포탄
          강의 잘 보았습니다.

          그런데 이미지 업로드를 구현 한 후에 테스트를 해 보니, 파일은 업로드가 되는데, '전송완료 메시지'가 안뜨고, '예'를 눌러봐도 '이미지 소스 url이 없습니다'라는 메시지를 띄웁니다. 서버에서 파일을 받았는지 확인해보면 파일은 있구요. 주소창에 직접 url을 쳐서 들어가도 이미지가 출력됩니다. ck에디터상에서만 url을 못 따오는 것 같은데... 무엇이 문제일까요?
        • 김승갑
          진짜 좋은 강의입니다.
        • egoing
          동영상은 업로드 하시는 것 보다는 youtube 등을 이용하시는 것을 추천 드립니다. 동영상 업로드는 별도의 복잡한 기술적인 도전 과제들이 필요합니다.
          대화보기
          • 목도리
            잘봣습니다 ㅎㅎ근데 이미지가 아닌 동영상도 업롣가 가능한가요?
          • 산넘어산
            한글이름 파일을 업로드를 하면 한글이 깨져서 저장이 되는데 어떻게 처리 해야하나요?
            iconv("UTF-8","EUC-KR",$filename) 이런 형식으로 변환말고 다른 방법은 없나요?
            (로컬에서 테스트하고 있습니다)
          • rrdna
            csrf가 켜져 있으니 ck에디터에서 화일 첨부가 안됩니다.
            csrf를 사용하면서 ckeditor를 사용할수는 없는것인지 알고 싶습니다.
          • egoing
            수정했습니다~
            대화보기
            • 리누즈토바르즈
              PHP에서 파일을 다루는 방법 주소가 깨졋습니다 수정바랍니다!
            • Guest
              이미지 업로드 가능 갯수를 제어 할수 없을까요?
              또한 업로드된 이미지를 문서(에디터)내에서 삭제시 실행할 수 있는 이벤트는 없을까요?
              업로드 구현은 간단한데 고민거리가 생기네요ㅜ
            • guest
              ckeditor와 csrf를 동시에 쓰려면 어찌 해야할까요?
            • egoing
              무료로 알고 있습니다.
              대화보기
              • 망뎅이
                근데... CKEditor가 상업용으로 사용해도 무료인가요? 라이선스가 애매하게 써있어서... 해석하기 참 어렵네요 ㅠ
              • Geust
                좋은 강좌 감사합니다. 저의 경우는 csrf를 활성화 시키고 나니까 CKEditor에서 화일 업로드가 되지 않는데 어떻게 csrf_token 을 함께 전송할 수 있을까요?
              • egoing
                디렉토리 퍼미션을 확인해보셔요
                2013년 6월 27일 목요일에 Disqus님이 작성:
                대화보기
                • Guest
                  글 삭제가 안되네요..잘못 설정한것때문에 그런거였습니다. 죄송합니다.
                  헌데 이미지 탭 만들고 나서 서버로 전송시 포비든 에러가 나는데조언 좀 부탁드립니다.
                  대화보기
                  • Guest
                    강좌 감사합니다.
                    ckeditor 의 이미지 업로드 기능을 구현중에 있습니다.
                    위에 풀이해주신대로 한다면 이미지버튼후에 업로드 텝이 생성되지 않습니다.
                  • egoing
                    좋은 팁입니다. ^^ 성원해주셔서 고맙습니다~
                    대화보기
                    • 양요한
                      잘봤습니다. 예상대로 upload 기능을 코어에서 제공해주는군요.그런데, $this->upload->do_upload() 는 첨부파일이 전달되지 않으면 에러가 나네요.첨부 파일을 생략할 수도 있는데 .. 선택사항임을 설정할 수 있는것도 아니고 ...
                      예제를 만들면서 아래 처럼 하긴 했는데... 문서에도 방법이 나와있지는 않네요
                      if($_FILES && $_FILES['userfile']['error'] == UPLOAD_ERR_OK) {
                      $this->upload->do_upload(); ...}
                    • sugarui
                      에디터의 적용 자체는 생각보다 안 어렵네요!! 받아서 불러오면 되는거네요.. 막막해서 못하고있었는데 너무 잘 봤습니다. 감사합니다.
                    • sugarui
                      에디터의 적용 자체는 생각보다 안 어렵네요! 소스코드 받아서 불러오면 되는거네요.. 막막해서 못하고 있었는데 너무 잘 봤습니다. 감사합니다.
                    버전 관리
                    egoing
                    현재 버전
                    선택 버전
                    graphittie 자세히 보기