PHP 무료 웹에디터 섬머노트 Summer Note 사용하기 - 이미지 첨부하기 2편

소스를 살펴보자.

 

<div id="summernote"></div>

 

<script>

    $(document).ready(function () {

    var $summernote = $('#summernote').summernote({

        codeviewFilter: false,

        codeviewIframeFilter: true,

        lang: 'ko-KR',

        height: 600,

        callbacks: {

            onImageUpload: function (files) {

                for(var i=0; i < files.length; i++) {

                    if(i>10){

                        alert('10개까지만 등록할 수 있습니다.');

                        return;

                    }

                }

                for(var i=0; i < files.length; i++) {

                    if(i>10){

                        alert('10개까지만 등록할 수 있습니다.');

                        return;

                    }

                sendFile($summernote, files[i]);

              } 

                

            }

        }

    });

});

</script>

 

이게 기본적인 소스다 섬머노트를 id가 summernote인 div에 표시하겠다는 거다.  그게 스크립트에 표현돼 있다.

 

이 스크립트에 callback을 추가했다. 여기에 보면 imageupload 버튼을 클릭했을때 어떤 작업을 하라고 나와있다.

 

비슷한 소스가 두개가 연속돼 있는데 전체 첨부한 이미지 갯수를 체크해보기 위해서다.

 

소스를 보다보면 파일이 첨부돼 있으면 sendFile($summernote, files[i]) 함수를 호출하라고 나온다.

 

sendFile 함수를 확인해보자...

 

function sendFile($summernote, file) {

    var formData = new FormData();

    formData.append("file", file);

    $.ajax({

        url: '/board/saveImage.php',

        data: formData,

        cache: false,

        contentType: false,

        processData: false,

        type: 'POST',

        success: function (data) {

            if(data==-1){

                alert('용량이 너무크거나 이미지 파일이 아닙니다.');

                return;

            }else{

                $summernote.summernote('insertImage', data, function ($image) {

                    $image.attr('src', data);

                    $image.attr('class', 'childImg');

                });

                var imgUrl=$("#imgUrl").val();

                if(imgUrl){

                    imgUrl=imgUrl+",";

                }

                $("#imgUrl").val(imgUrl+data);

            }

        }

    });

 

}

 

간단하다. 첨부한 파일을 받아서 file이라는 변수에 넣어주고 그걸 ajax를 통해 php파일로 넘겨준다.

 

그러면 php 파일에서 받은 파일을 서버에 올려주고 서버에 올린 파일명을 다시 리턴해주면 되는것이다.

 

리턴받은 파일 경로를 섬머노트의 insert 이미지 함수에 적용해준다. 그리고 디비에 넣기 위해 imgUrl 변수에 기록한다...

 

이번엔 그럼 saveImage.php에서 무슨 일이 있었는지 확인해보자.

 

 

saveImage.php

 

<?php

 

if($_FILES['file']['size']>10240000){//10메가

            echo "-1";

            exit;

        }

        $ext = substr(strrchr($_FILES['file']['name'],"."),1);

        $ext = strtolower($ext);

        if ($ext != "jpg" and $ext != "png" and $ext != "jpeg" and $ext != "gif")

        {

            echo "-1";

            exit;

        }

        $now3=time();

        $name = "mp_".$now3.substr(rand(),0,4);

        $filename = $name.'.'.$ext;

        $destination = '/var/www/public_html/board/upImages/'.$filename;

        $location =  $_FILES["file"]["tmp_name"];

        move_uploaded_file($location,$destination);

        

        echo '/board/upImages/'.$filename;

 

?>

 

ajax에서 던져준 파일의 용량을 체크하고 이미지 파일인지 확인하고 파일을 올릴 서버 경로를 지정하고 거기에 파일을 업로드 한다.

 

업로가 안료되면 경로와 이미지 파일명을 함께 리턴해준다.

 

끝이다...