php+mysql 게시판 만들기 강좌 #24. 회원 게시판 - ajax를 이용한 파일 첨부

 

 

기존에 파일 첨부는 첨부할 파일을 선택하고 글을 등록해야 등록이 되는 방식이었는데 이번에는 파일을 선택하면 ajax를 통해 등록을 하고 등록된 파일을 미리보기형태로 보여주어 삭제도 가능하도록 작업해보자.

 

글을 작성하는 write.php를 수정한다.

 

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

}

?>

        <form method="post" action="write_ok.php" 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>

            <textarea class="form-control" id="exampleFormControlTextarea1" name="content" rows="3"><?php echo $rs->content;?></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>

    $("#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";

?>

<input type="file" name="upfile" id="upfile" multiple> 이렇게 아이디를 부여한 후 이미지를 선택하면 각 해당 파일들을 attachFile 함수로 보낸다. 그 함수에서는 ajax를 이용해서 파일을 서버에 등록해준다. 

그리고 그 값을 디비에 저장하고 현재 보고 있는 write.php 페이지로 리턴해준다. 그러면 그 값을 가지고 현재 페이지에 뿌려주는 것이다. save_image.php 파일을 만들어보자.

/save_image.php

<?php session_start();

include $_SERVER["DOCUMENT_ROOT"]."/inc/dbcon.php";

ini_set( 'display_errors', '0' );

if(!$_SESSION['UID']){

    $retun_data = array("result"=>"member");

    echo json_encode($retun_data);

    exit;

}

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

    $retun_data = array("result"=>"size");

    echo json_encode($retun_data);

    exit;

}

if($_FILES['savefile']['type']!='image/jpeg' and $_FILES['savefile']['type']!='image/gif' and $_FILES['savefile']['type']!='image/png'){//이미지가 아니면, 다른 type은 and로 추가

    $retun_data = array("result"=>"image");

    echo json_encode($retun_data);

    exit;

}

$save_dir = $_SERVER['DOCUMENT_ROOT']."/data/";//파일을 업로드할 디렉토리

$filename = $_FILES["savefile"]["name"];

$ext = pathinfo($filename,PATHINFO_EXTENSION);//확장자 구하기

$newfilename = date("YmdHis").substr(rand(),0,6);

$savefile = $newfilename.".".$ext;//새로운 파일이름과 확장자를 합친다

if(move_uploaded_file($_FILES["savefile"]["tmp_name"], $save_dir.$savefile)){//파일 등록에 성공하면 디비에 등록해준다.

    $sql="INSERT INTO testdb.file_table

    (userid, filename)

    VALUES('".$_SESSION['UID']."', '".$savefile."')";

    $result = $mysqli->query($sql) or die($mysqli->error);

    $fid = $mysqli -> insert_id;

    $retun_data = array("result"=>"success", "fid"=>$fid, "savename"=>$savefile);

    echo json_encode($retun_data);

    exit;

}else{

    $retun_data = array("result"=>"error");

    echo json_encode($retun_data);

    exit;

}

?>

     

기존 방법과 다른 것은 없다. 다만 아직 글을 작성하지 않았으므로 file_table에 bid값을 주지 않고 등록했다. 추후에 게시물을 등록하면 한꺼번에 등록하기 위해서 리턴값에 fid를 넘겨준다.

write.php파일에서 fid값을 저장해주는 부분이 <input type="hidden" name="file_table_id" id="file_table_id" value=""> 이부분이다. 여기에 ,로 구분해서 저장한 다음 write_ok.php에서 처리해준다.

/write_ok.php

<?php session_start();

include $_SERVER["DOCUMENT_ROOT"]."/inc/dbcon.php";

if(!$_SESSION['UID']){

    echo "<script>alert('회원 전용 게시판입니다.');location.href='/index.php';</script>";

    exit;

}

// echo "<pre>";

// print_r($_FILES);

// exit;

$subject=$_POST["subject"];

$content=$_POST["content"];

$bid=$_POST["bid"];//bid값이 있으면 수정이고 아니면 등록이다.

$parent_id=$_POST["parent_id"];//parent_id가 있으면 답글이다.

$userid=$_SESSION['UID'];//userid는 세션값으로 넣어준다.

$status=1;//status는 1이면 true, 0이면 false이다.

$file_table_id=$_POST["file_table_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('본인 글이 아니면 수정할 수 없습니다.');location.href='/';</script>";

        exit;

    }

    $sql="update board set subject='".$subject."', content='".$content."', modifydate=now() where bid=".$bid;

}else{

    if($parent_id){//답글인 경우 쿼리를 수정해서 parent_id를 넣어준다.

        $sql="insert into board (userid,subject,content,parent_id) values ('".$userid."','".$subject."','".$content."','".$parent_id."')";

    }else{

        $sql="insert into board (userid,subject,content) values ('".$userid."','".$subject."','".$content."')";

    }

   

}

$result=$mysqli->query($sql) or die($mysqli->error);

if(!$bid)$bid = $mysqli -> insert_id;

if($_FILES["upfile"]["name"][0]){//첨부한 파일이 있으면

    for($k=0;$k<count($_FILES["upfile"]["name"]);$k++){

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

            echo "<script>alert('10메가 이하만 첨부할 수 있습니다.');history.back();</script>";

            exit;

        }

        if($_FILES['upfile']['type'][$k]!='image/jpeg' and $_FILES['upfile']['type'][$k]!='image/gif' and $_FILES['upfile']['type'][$k]!='image/png'){//이미지가 아니면, 다른 type은 and로 추가

            echo "<script>alert('이미지만 첨부할 수 있습니다.');history.back();</script>";

            exit;

        }

        $save_dir = $_SERVER['DOCUMENT_ROOT']."/data/";//파일을 업로드할 디렉토리

        $filename = $_FILES["upfile"]["name"][$k];

        $ext = pathinfo($filename,PATHINFO_EXTENSION);//확장자 구하기

        $newfilename = date("YmdHis").substr(rand(),0,6);

        $upfile = $newfilename.".".$ext;//새로운 파일이름과 확장자를 합친다

       

        if(move_uploaded_file($_FILES["upfile"]["tmp_name"][$k], $save_dir.$upfile)){//파일 등록에 성공하면 디비에 등록해준다.

            $sql="INSERT INTO testdb.file_table

            (bid, userid, filename)

            VALUES(".$bid.", '".$_SESSION['UID']."', '".$upfile."')";

            $result=$mysqli->query($sql) or die($mysqli->error);

        }

    }

}

if($file_table_id){

    $fid=explode(",",$file_table_id);

    foreach($fid as $f){

        if($f){

            $uq="update file_table set bid=".$bid." where fid=".$f;

            $ur=$mysqli->query($uq) or die($mysqli->error);

        }

    }

}

if($result){

    echo "<script>location.href='/index.php';</script>";

    exit;

}else{

    echo "<script>alert('글등록에 실패했습니다.');history.back();</script>";

    exit;

}

?>

이렇게 해준다. $file_table_id값을 이용해서 미리 입력해 놓은 테이블에 값을 변경해준다. 이렇게하면 물론 쓰레기데이터가 생긴다. 처리되지 않은 bid값이 없는 값들이 생기기때문에 그런 값들은 크론을 통해 삭제하거나 하는 방법을 써야한다.