PHP강좌/[라라벨]게시판만들기강좌
[라라벨+mysql]게시판 만들기 강좌 #15. 첨부파일 방식 변경(게시판에 등록) 4/4
에스크리토
2024. 7. 25. 10:43
반응형
다시 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가 업데이트 됐으면 성공이다. 아직 게시판 보기 부분은 수정 안했으니 보기를 해도 첨부 이미지가 보이지는 않는다.
그건 다음 시간에 해보도록 하자.
반응형