[라라벨+mysql]게시판 만들기 강좌 #15. 첨부파일 방식 변경(게시판에 등록) 4/4

다시 write.blade.php 파일을 살펴보자.

 

/resources/views/boards/write.blade.php

@extends('boards.layout')

@section('header')

    @include('boards.toptitle', ['toptitle'=>'게시판 쓰기', 'multi'=>$multi])

@endsection

@section('content')

<br />

    <form method="post" action="/boards/create" enctype="multipart/form-data">

        @csrf

        @method('post')

        <input type="hidden" name="pid" id="pid" value="{{ $boards->bid??time() }}">

        <input type="hidden" name="code" id="code" value="boardattach">

        <input type="hidden" name="attcnt" id="attcnt" value="0">

        <input type="hidden" name="imgUrl" id="imgUrl" value="">

        <input type="hidden" name="attachFile" id="attachFile" value="">

        <div class="form-group">

            <div class="col-md-12">

                <input type="text" name="subject" id="subject" class="form-control input-lg" placeholder="제목을 입력하세요." />

            </div>

        <br />

        </div>

        <div class="form-group">

            <div class="col-md-12">

                <textarea class="form-control" id="content" name="content" rows="5" placeholder="내용을 입력하세요."></textarea>

            </div>

        </div>

        <br />

        <div class="form-group">

            <div id="attach_site" class="col-md-12">

                <div class="row row-cols-1 row-cols-md-6 g-4" id="attachFiles" style="margin-left:0px;">

                </div>

           </div>

           <div class="col-md-12">

                <input type="file" name="afile" id="afile" multiple accept="image/*" multiple class="form-control" aria-label="Large file input example">

           </div>

        </div>

        <br />

        <br />

        <div class="form-group">

            <div class="col-md-12 text-center">

                <button type="button" name="edit" class="btn btn-primary input-lg" onclick="sendsubmit()">등록</button>

            </div>

        </div>

    </form>

<script>

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

        var formData = new FormData();

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

        var files = $('#afile').prop('files');

        var totcnt=parseInt(attcnt)+parseInt(files.length)

        if(totcnt>5){

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

            return false;

        }

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

            attachFile(files[i]);

        }

    });  

    function attachFile(file) {

        var formData = new FormData();

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

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

        formData.append("file", file);

        formData.append("uptype", "attach");

        formData.append("pid", pid);

        formData.append("code", code);

        $.ajax({

            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},

            url: '{{ route('boards.saveimage') }}',

            data: formData,

            cache: false,

            contentType: false,

            processData: false,

            dataType : 'json' ,

            type: 'POST',

            success: function (return_data) {

    //          console.log(JSON.stringify(return_data));

                if(return_data.result=='fail'){

                    alert(return_data.msg);

                    return false;

                }else{

                    //var img="<img src='"+data+"' width='50'><br>";

                    var html = "<div id='af_"+return_data.fid+"' class='card h-100' style='width:120px;margin-right: 10px;margin-bottom: 10px;'><img src='/images/"+return_data.fn+"' width='100' /><div class='card-body'><button type='button' class='btn btn-warning' onclick=\"deletefile('"+return_data.fn+"', '"+return_data.fid+"')\">삭제</button></div></div>";

                        $("#attachFiles").append(html);

                   

                    var rcnt=parseInt(attcnt)+1;

                    $("#attcnt").val(rcnt);

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

                    if(attachFile){

                        attachFile=attachFile+",";

                    }

                    $("#attachFile").val(attachFile+return_data.fn);

                }

            }

            , beforeSend: function () {

                var width = 0;

                var height = 0;

                var left = 0;

                var top = 0;

                width = 50;

                height = 50;

                top = ( $(window).height() - height ) / 2 + $(window).scrollTop();

                left = ( $(window).width() - width ) / 2 + $(window).scrollLeft();

                if($("#div_ajax_load_image").length != 0) {

                        $("#div_ajax_load_image").css({

                                "top": top+"px",

                                "left": left+"px"

                        });

                        $("#div_ajax_load_image").show();

                }

                else {

                        $('body').append('<div id="div_ajax_load_image" style="position:absolute; top:' + top + 'px; left:' + left + 'px; width:' + width + 'px; height:' + height + 'px; z-index:9999;" class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div>');

                }

        }

            , complete: function () {

                        $("#div_ajax_load_image").hide();

        }

        });

    }

    function deletefile(fn,fid){

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

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

        var data = {

            fn : fn,

            pid : pid,

            code : code

        };

        $.ajax({

            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},

            type: 'post',

            url: '{{ route('boards.deletefile') }}',

            dataType: 'json',

            data: data,

            success: function(data) {

                alert("삭제했습니다.");

                $("#af_"+fid).hide();

            },

            error: function(data) {

                console.log("error" +JSON.stringify(data));

            }

        });

    }

    function sendsubmit(){

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

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

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

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

        var data = {

            multi : '{{ $multi }}',

            subject : subject,

            content : content,

            pid : pid,

            code : code

        };

        $.ajax({

            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},

            type: 'post',

            url: '{{ route('boards.create') }}',

            dataType: 'json',

            enctype: 'multipart/form-data',

            data: data,

            success: function(data) {

                location.href='/boards/show/'+data.bid+'/1';

            },

            error: function(data) {

                console.log("error" +data);

            }

        });

    }

</script>    

@endsection

 

sendsubmit 부분이 많이 바뀌었다. form 부분은 필요없어졌다. 첨부파일은 이미 등록했고 미리 등록해 놓은 첨부파일 테이블에서 pid만 수정해주면 된다. 

 

라우터는 이미 있으니 콘트롤러의 create 부분만 수정하면 된다.

 

/app/Http/Controllers/BoardController.php

public function create(Request $request)

    {

        // $image = $request->file('afile');

        // $new_name = null;

        // if($image){

        //     $new_name = rand().'_'.time().'.'.$image->getClientOriginalExtension();

        //     $image->move(public_path('images'), $new_name);

        // }

        $form_data = array(

            'subject' => $request->subject,

            'content' => $request->content,

            'userid' => Auth::user()->userid,

            'email' => Auth::user()->email,

            'multi' => $request->multi??'free',

            'status' => 1

        );

        if(auth()->check()){

            $rs=Board::create($form_data);

            FileTables::where('pid', $request->pid)->where('code', $request->code)->where('userid', Auth::user()->userid)->update(array('pid' => $rs->bid));

            return response()->json(array('msg'=> "succ", 'bid'=>$rs->bid), 200);

        }

    }

 

게시판 테이블에 등록 후 미리 등록해 놓은 file_tables 테이블의 pid값을 board테이블의 bid로 update 해주면 된다.

 

이렇게 pid가 업데이트 됐으면 성공이다. 아직 게시판 보기 부분은 수정 안했으니 보기를 해도 첨부 이미지가 보이지는 않는다.

 

그건 다음 시간에 해보도록 하자.