ajax를 이용해서 페이지 이동 없이 이미지 삭제

배너나 글 작성/수정 하는 페이지에서 첨부된 이미지를 화면의 전환 없이 삭제하여 

페이지 이동 없이 작업을 계속 할수 있는 페이지를 만들어 봤습니다.

UI페이이지와 데이터를 받는 페이지의 중요 부분만 요약 했습니다.

아래와 이미지를 컨트롤 할 버튼을 만들고 이벤트를 걸었습니다.

이 포스팅에선 버튼이 여러개라고 생각하고 버튼 클래스에 이벤트를 걸었습니다.

<script>

$(function(){

$('.delete_btn').click(function(){

if(confirm("한번 삭제하면 복구할 수 없습니다.\n정말로 삭제하시겠습니까?")==true){

var img_id = "이미지 아이디"

var file_url = "파일경로"

var uid = "테이블번호"

$.ajax({

type:"POST",

url:"./image_delete.php",

dataType:'json',

data:{url:file_url, uid:uid}, //json형태로 데이터를 날려줍니다.

success: function(data){ $('#'+img_id).attr('src','./img/none_banner.gif'); },

//이미지를 지웠으면 blank이미지로 교체 해준다.

error: function(){ alert("사진을 삭제하지 못했습니다.."); }

});

}

});

});

</script>

- image_delete.php -

<?php

$db_host = "localhost";

$db_user = "root";

$db_passwd = "yourpass";

$db_name = "yourdb";

$connect = mysqli_connect ($db_host, $db_user, $db_passwd, $db_name);

mysqli_select_db($connect, $db_name);

$url = $_POST['url'];

$uid = $_POST['uid'];

if ($id&&$url){

unlink($url);  //파일삭제

$query = "update $table_name set

$url = ''  //db에 저장된 파일 경로 삭제

where uid = '$uid'";

mysql_query($query);

}

 

?>