반응형

웹에디터를 사용할때 가장 큰 문제점 하나가 바로 에디터안에 이미지를 첨부하는 것이다. 대부분 웹에디터들이 이런 기능을 제공하고 있지만 적용하기가 쉽지 않다. 섬머노트도 그렇긴 하지만 다른것보단 쉽다. 따라해보자.

 

위 이미지들을 잘 보자. 저 버튼을 눌러서 파일선택을 하면 선택한 이미지가 웹에디터 안으로 들어가며 저장하면 그대로 디비에 저장되게 되고 게시판 볼때 그 이미지가 나타나야한다. 

 

이제 글쓰기 소스를 수정해보자.

 

./write.php

 

<?php
include $_SERVER["DOCUMENT_ROOT"]."/inc/header.php";

if(!$_SESSION['UID']){
    echo "<script>alert('회원 전용 게시판입니다.');history.back();</script>";
    exit;
}

$bid=$_GET["bid"];//get으로 넘겼으니 get으로 받는다.
$parent_id=$_GET["parent_id"];

if($bid){//bid가 있다는건 수정이라는 의미다.

    $result = $mysqli->query("select * from board where bid=".$bid) or die("query error => ".$mysqli->error);
    $rs = $result->fetch_object();

    if($rs->userid!=$_SESSION['UID']){
        echo "<script>alert('본인 글이 아니면 수정할 수 없습니다.');history.back();</script>";
        exit;
    }

    $fquery="select * from file_table where status=1 and bid=".$rs->bid." order by fid asc";
    $file_result = $mysqli->query($fquery) or die("query error => ".$mysqli->error);
    while($frs = $file_result->fetch_object()){
        $fileArray[]=$frs;
    }

}

if($parent_id){//parent_id가 있다는건 답글이라는 의미다.

    $result = $mysqli->query("select * from board where bid=".$parent_id) or die("query error => ".$mysqli->error);
    $rs = $result->fetch_object();
    $rs->subject = "[RE]".$rs->subject;
}


?>
    <!-- summernote 추가분 -->
<!-- summernote 추가분 -->
        <form method="post" action="write_ok.php" onsubmit="return sendform();" enctype="multipart/form-data">
            <input type="hidden" name="bid" value="<?php echo $bid;?>">
            <input type="hidden" name="parent_id" value="<?php echo $parent_id;?>">
            <input type="hidden" name="file_table_id" id="file_table_id" value="">
            <div class="mb-3">
            <label for="exampleFormControlInput1" class="form-label">제목</label>
                <input type="text" name="subject" class="form-control" id="exampleFormControlInput1" placeholder="제목을 입력하세요." value="<?php echo $rs->subject;?>">
            </div>
            <div class="mb-3">
            <label for="exampleFormControlTextarea1" class="form-label">내용</label>
            <div id="summernote"><?php echo $rs->content;?></div><!-- summernote 추가분 -->
            <textarea id="content" name="content" style="display: none;"></textarea>
            </div>
            <div class="mb-3">
                <input type="file" name="upfile[]" id="upfile" multiple class="form-control form-control-lg" aria-label="Large file input example">
            </div>
            <!-- 첨부된 이미지 표시 -->
            <div class="row row-cols-1 row-cols-md-6 g-4" id="imageArea">
                <?php
                    foreach($fileArray as $fa){
                ?>
                <div class="col" id="f_<?php echo $fa->fid;?>">
                    <div class="card h-100">
                        <img src="/data/<?php echo $fa->filename?>" class="card-img-top" >
                    <div class="card-body">
                        <button type="button" class="btn btn-warning" onclick="file_del(<?php echo $fa->fid;?>)">삭제</button>
                    </div>
                    </div>
                </div>
                <?php }?>
               
            </div>
            <!-- 첨부된 이미지 -->
            <br />
            <button type="submit" class="btn btn-primary">등록</button>
        </form>

<script>
    //summernote 추가분
    $(document).ready(function() {
        var $summernote = $('#summernote').summernote({
            codeviewFilter: false,
            codeviewIframeFilter: true,
            lang: 'ko-KR',
            height: 500,
            callbacks: {
                onImageUpload: function (files) {
                    if(files.length>3){
                        alert('3개까지만 등록할 수 있습니다.');
                        return;
                    }
                    for(var i=0; i < files.length; i++) {
                        sendFile($summernote, files[i]);
                    }
                   
                }
            }
        });
    });

    function sendFile($summernote, file) {
        var formData = new FormData();
        formData.append("file", file);
        $.ajax({
            url: 'summerimagesave.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');
                    });
                }
            }
        });

    }

    function sendform(){
        var contents=$('#summernote').summernote('code');

        if ($('#summernote').summernote('isEmpty')) {
          alert('내용을 입력하세요.');
          return false;
        }

        $("#content").html(contents);

        return true;
    }

    $("#upfile").change(function(){

        var files = $('#upfile').prop('files');
        for(var i=0; i < files.length; i++) {
            attachFile(files[i]);
        }

        $('#upfile').val('');

    });  

    function attachFile(file) {
        var formData = new FormData();
        formData.append("savefile", file);
        $.ajax({
            url: 'save_image.php',
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            dataType : 'json' ,
            type: 'POST',
            success: function (return_data) {
                if(return_data.result=="member"){
                    alert('로그인 하십시오.');
                    return;
                }else if(return_data.result=="size"){
                    alert('10메가 이하만 첨부할 수 있습니다.');
                    return;
                }else if(return_data.result=="image"){
                    alert('이미지 파일만 첨부할 수 있습니다.');
                    return;
                }else if(return_data.result=="error"){
                    alert('첨부하지 못했습니다. 관리자에게 문의하십시오.');
                    return;
                }else{
                    fid = $("#file_table_id").val() + return_data.fid + ",";
                    $("#file_table_id").val(fid);
                    var html = "<div class='col' id='f_"+return_data.fid+"'><div class='card h-100'><img src='/data/"+return_data.savename+"' class='card-img-top'><div class='card-body'><button type='button' class='btn btn-warning' onclick='file_del("+return_data.fid+")'>삭제</button></div></div></div>";
                    $("#imageArea").append(html);
                }
            }
        });

    }



    function file_del(fid){

        if(!confirm('삭제하시겠습니까?')){
        return false;
        }
           
        var data = {
            fid : fid
        };
            $.ajax({
                async : false ,
                type : 'post' ,
                url : 'file_delete.php' ,
                data  : data ,
                dataType : 'json' ,
                error : function() {} ,
                success : function(return_data) {
                    if(return_data.result=="member"){
                        alert('로그인 하십시오.');
                        return;
                    }else if(return_data.result=="my"){
                        alert('본인이 작성한 글만 삭제할 수 있습니다.');
                        return;
                    }else if(return_data.result=="no"){
                        alert('삭제하지 못했습니다. 관리자에게 문의하십시오.');
                        return;
                    }else{
                        $("#f_"+fid).hide();
                    }
                }
        });

    }

</script>

<?php
include $_SERVER["DOCUMENT_ROOT"]."/inc/footer.php";
?>

 

이미지첨부 버튼을 클릭하면 함수가 작동을 한다. 이미지를 선택하면 ajax를 통해 서버에 이미지를 업로드 하고 업로드한 이미지를 웹에디터에 첨부해준다.

 

ajax를 통해 이미지를 서버에 업로드해주는 summerimagesave.php 파일을 만들어보자.

 

./summerimagesave.php

 

<?php session_start();
include $_SERVER['DOCUMENT_ROOT']."/inc/dbcon.php";
ini_set( 'display_errors', '0' );

        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;
        }

        $name = "summer_".date("YmdHis").substr(rand(),0,4);
        $filename = $name.'.'.$ext;
        $destination = $_SERVER['DOCUMENT_ROOT'].'/data/'.$filename;
        $location =  $_FILES["file"]["tmp_name"];
        move_uploaded_file($location,$destination);

        echo '/data/'.$filename;

?>

이 파일은 그냥 서버에 이미지를 업로드해주는 파일이다. 별다른 특징은 없다. 다만 리턴해주는 값이 웹에디터에 뿌려줘야하므로 이미지가 업로드된 경로와 파일명을 리턴해준다.

 

이제 이미지를 넣어보자.

 

이렇게 들어갔으면 성공이다. 저장해보자.

 

저장한 내용이 그대로 보인다면 성공이다.

 

이렇게 끝나면 좋겠지만 이게 끝이 아니다. 이 게시물을 수정하거나 삭제할때 웹에디터에 첨부한 내용에 대해 검증하고 기록해야한다. 그래야지만 글 작성중에 이미지를 등록했는지 또는 삭제했는지 확인할 수 있기때문이다. 다음 시간엔 웹에디터를 이용해 이미지를 삽입해서 작성하는 경우에 삽입한 이미지에 대한 관리에 대해 공부해도록 하자.

 

반응형
저작자표시

'PHP강좌 > 게시판만들기강좌' 카테고리의 다른 글

php+mysql 게시판 만들기 강좌 #29. 회원 게시판 - iframe을 이용해 웹에디터 추가하기  (5) 2022.12.16
php+mysql 게시판 만들기 강좌 #28. 회원 게시판 - 웹에디터에 이미지 첨부하기 심화과정 이미지 삭제 정보 처리  (3) 2022.12.14
php+mysql 게시판 만들기 강좌 #26. 회원 게시판 - 웹에디터 적용하기 feat. summernote  (1) 2022.12.14
php+mysql 게시판 만들기 강좌 #25-1. 회원 게시판 - 댓글에 이미지 첨부 오류 수정(댓글 쓰기, 수정, 삭제)  (0) 2022.08.30
php+mysql 게시판 만들기 강좌 #25. 회원 게시판 - 댓글에 이미지 첨부 feat.ajax(내용수정)  (5) 2022.02.14

+ Recent posts

티스토리툴바