반응형
자 이제 여기서 첨부 이미지의 삭제 버튼을 클릭하면 첨부한 이미지가 삭제 되도록 작업해 보겠다. 순서는 동일하다. 삭제 버튼을 눌렀을때 작동하는 스크립트를 넣어주고 라우터를 추가하고 콘트롤러를 만들어주면 된다.
/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
deletefile 함수를 추가했다.
/routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\BoardController;
use App\Http\Controllers\MemberController;
Route::get('/', function () {
return view('welcome');
});
//게시판
Route::get('/boards/{multi?}', [BoardController::class, 'index'])->name('boards.index');
Route::get('/boards/show/{id}/{page}', [BoardController::class, 'show'])->name('boards.show');
Route::middleware('auth') -> group(function (){
Route::get('/boards/write/{multi}', [BoardController::class, 'write'])->name('boards.write');
Route::post('/boards/create', [BoardController::class, 'create'])->name('boards.create');
Route::post('/boards/saveimage', [BoardController::class, 'saveimage'])->name('boards.saveimage');
Route::post('/boards/deletefile', [BoardController::class, 'deletefile'])->name('boards.deletefile');
});
//회원
Route::get('/login', [MemberController::class, 'login'])->name('auth.login');
Route::get('/signup', [MemberController::class, 'signup'])->name('auth.signup');
Route::post('/signupok', [MemberController::class, 'signupok'])->name('auth.signupok');
Route::post('/emailcheck', [MemberController::class, 'emailcheck'])->name('auth.emailcheck');
Route::post('/loginok', [MemberController::class, 'loginok']) -> name('auth.loginok');
Route::post('/logout', [MemberController::class, 'logout']) -> name('auth.logout');
/app/Http/Controllers/BoardController.php
public function deletefile(Request $request)
{
$image = $request->fn;
if(unlink(public_path('images')."/".$image)){
FileTables::where('filename', $image)->where('code', $request->code)->where('userid', Auth::user()->userid)->update(array('status' => 0));
}
return response()->json(array('msg'=> "succ", 'fn'=>$image, 'fid'=>substr($image,0,10)), 200);
}
첨부한 이미지를 삭제하면 등록했던 file_tables 테이블에서 status값만 0으로 바꿔 주도록 했다.
"삭제했습니다"라는 알럿이 뜨고 등록한 이미지가 없어지면 성공이다.
테스트는 한개 파일을 등록하는걸 했지만 여러개도 가능하니 그건 각자가 해보자.
다음엔 첨부한 이미지와 함께 게시판 테이블에 등록하는 걸 해보자.
반응형
'PHP강좌 > [라라벨]게시판만들기강좌' 카테고리의 다른 글
| [라라벨+mysql]게시판 만들기 강좌 #16. 보기 페이지 수정 (0) | 2024.07.25 |
|---|---|
| [라라벨+mysql]게시판 만들기 강좌 #15. 첨부파일 방식 변경(게시판에 등록) 4/4 (0) | 2024.07.25 |
| [라라벨+mysql]게시판 만들기 강좌 #13. 첨부파일 방식 변경(ajax로 파일 첨부) 2/4 (0) | 2024.07.25 |
| [라라벨+mysql]게시판 만들기 강좌 #12. 첨부파일 방식 변경(테이블 생성) 1/4 (0) | 2024.07.24 |
| [라라벨+mysql]게시판 만들기 강좌의 지금까지 소스 모음 (0) | 2024.07.23 |