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. 똘똘이박사
    오~ 날려버린 나의 3일님 감사합니다.
    저도 그 문제로 지금 거의 한달가까이 진행 못하고 있다가
    님의 힌트 덕분에 해결했습니다.
    CK4.9.2 버전을 사용했는데 뭔가 내부적으로 변화가 있나 보네요
    암튼 정말 고맙습니다~^^
  2. 날려버린 나의 3일
    CI 3.0
    CK 4.0 에서 이미지 업로드시 잘못된 서버 응답 오류로 몇일 고생하다가
    커뮤니티에서 어떤분 댓글로 성공했습니다.

    echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction('".$CKEditorFuncNum."', '".$url."', '전송에 성공 했습니다')</script>";
    이부분을

    echo '{"filename" : "'.$filename.'", "uploaded" : 1, "url":"'.$url.'"}';

    이렇게 해보세요 화이팅!
  3. battrangnews
  4. choetboi
  5. choetboi
  6. choetboi
    [url]http://dongamruou.vn/san-pham/cu-dinh-lang-dieu-khac-nghe-thuat/[/url]
  7. choetboi
    http://dongamruou.vn/
    http://dongamruou.vn/san-pham/tao-meo-tuoi/
    http://dongamruou.vn/san-pham/chuoi-hot-kho/
    http://dongamruou.vn/san-pham/ba-kich-tim/
    http://dongamruou.vn/san-pham/nam-ngoc-cau-tuoi/
    http://dongamruou.vn/san-pham/ha-thu-o-do/
    http://dongamruou.vn/san-pham/cu-dinh-lang/
    http://dongamruou.vn/san-pham/cay-dinh-lang/
    http://dongamruou.vn/san-pham/nu-hoa-tam-that/
    http://dongamruou.vn/san-pham/sam-cau-do/
    http://dongamruou.vn/san-pham/sau-chit-tuoi/
    http://dongamruou.vn/san-pham/dam-duong-hoac-kho/
    http://dongamruou.vn/san-pham/bach-tat-le/
    http://dongamruou.vn/san-pham/nhuc-thung-dung/
    http://dongamruou.vn/san-pham/binh-thuy-tinh-ngam-ruou/
    http://dongamruou.vn/san-pham/binh-ngam-ruou-han-quoc/
    http://dongamruou.vn/san-pham/chum-sanh-ngam-ruou/
    http://dongamruou.vn/san-pham/cu-dinh-lang-dieu-khac-nghe-thuat/
  8. 업로드 실패시 파일 선택폼 유지코드
    - 실패시에도 callFunction을 해야합니다 (인자는 false로)

    function upload_receive_from_ck(){
    $config['upload_path'] = './public/uploads/user';
    // git,jpg,png 파일만 업로드를 허용한다.
    $config['allowed_types'] = 'gif|jpg|png';
    // 허용되는 파일의 최대 사이즈
    $config['max_size'] = '2000';
    // 이미지인 경우 허용되는 최대 폭
    $config['max_width'] = '2048';
    // 이미지인 경우 허용되는 최대 높이
    $config['max_height'] = '1536';
    $this->load->library('upload', $config);

    $CKEditorFuncNum = $this->input->get('CKEditorFuncNum');
    if ( ! $this->upload->do_upload("upload"))
    {
    $msg = "'{$this->upload->display_errors(false,false)}'";
    $url ="false";
    }
    else
    {
    $data = $this->upload->data();
    $filename = $data['file_name'];

    $msg = "false";
    $url = "'/public/uploads/user/{$filename}'";
    }
    echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction('{$CKEditorFuncNum}', {$url}, {$msg} )</script>";
    }
  9. 예제 코드가 빠져서 아쉬워요.ㅠㅠ.. 좀 많더라도 함꼐 올려주셨으면 좋겠습니다.
    git은 할 줄 몰라서 식별이 쉽지 않습니다.
  10. 업로드까지만하고 글쓰던거 취소해버리면
    업로드했던 파일은 쓸모가없어서 지워야되는데
    그과정은 어떻게 깔끔하게 처리할수있을지 음....
  11. 김세창
    잘배웠습니다~!! ㅎㅎ
  12. 늦깎이
    작은선물님 덕분에 하나 해결했습니다. 감사합니다.
    대화보기
    • 작은선물
      CodeIgniter 3.1.1버전 이후 파일 업로드 시 php.ini에 php_fileinfo를 extension 해야합니다.
      저도 안되서 구글링해본결과 기존의 function _file_mime_type() 안에 함수가 변경되었다고 합니다.^^;
    • 신입1
      감사합니다.
    • 장루피나
      localhost에서 작업하면 이미지 업로드가 안되나요?
    • 정수리형
      강의 잘보고있습니다!! 많은 도움이 되요~!!
      그런데 이미지 업로드를 구현 한 후에 테스트를 해 보니, 파일은 업로드가 되는데, '전송완료 메시지'가 안뜨고, '예'를 눌러봐도 '이미지 소스 url이 없습니다'라는 메시지를 띄웁니다. 서버에서 파일을 받았는지 확인해보면 파일은 있구요. 주소창에 직접 url을 쳐서 들어가도 이미지가 출력됩니다. ck에디터상에서만 url을 못 따오는 것 같은데... 무엇이 문제일까요?
    • JustStudy
      고맙습니다
    • 잘보고 갑니다.
    • Frank
      고맙습니다.
      대화보기
      • chase
        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
                        에디터의 적용 자체는 생각보다 안 어렵네요!! 받아서 불러오면 되는거네요.. 막막해서 못하고있었는데 너무 잘 봤습니다. 감사합니다.
                      버전 관리
                      egoing
                      현재 버전
                      선택 버전
                      graphittie 자세히 보기