BUUOJ(Web)
阿新 • • 發佈：2020-11-03
這篇文章主要介紹了tp5框架基於ajax實現非同步刪除圖片的方法,結合例項形式詳細分析了thinkPHP5使用ajax非同步刪除圖片前臺提交與後臺處理相關操作技巧,需要的朋友可以參考下
本文例項講述了tp5框架基於ajax實現非同步刪除圖片的方法。分享給大家供大家參考，具體如下：
為了提高使用者體驗，我們為商品相簿製作了ajax無重新整理非同步刪除的功能，過程和方法還是非常值得借鑑的，效果如下：
上面的圖片列表中，你點一下旁邊的減號就會在不需要重新整理當前頁面的情況下不光從網頁頁面上刪除圖片，也會從伺服器端刪除該圖片，看看我們的核心處理程式碼吧：
首先是客戶端的js程式碼：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
function delrow(o){
if(confirm('確定要刪除該圖嗎？')){
var div=$(o).parent().parent();
var id=div.attr('id');
$.ajax({
type:"POST",
data:{id:id},
url:"{:url('Goods/ajaxdelpic')}",
success:function(data){
if(data==1){
div.remove();
}else{
alert('刪除失敗！');
}
}
});
}
}
|
當請求傳送到伺服器端的時候我們是這樣處理的：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// 非同步刪除商品相簿圖片public function ajaxdelpic($id){
$gphoto=db('goods_photo');
$gphotos=$gphoto->find($id);
$ogPhoto=IMG_UPLOADS.$gphotos['og_photo'];
$bigPhoto=IMG_UPLOADS.$gphotos['big_photo'];
$midPhoto=IMG_UPLOADS.$gphotos['mid_photo'];
$smPhoto=IMG_UPLOADS.$gphotos['sm_photo'];
@unlink($ogPhoto);@unlink($bigPhoto);
@unlink($midPhoto);
@unlink($smPhoto);
$del=$gphoto->delete($id);
if($del){
echo 1;
}else{
echo 2;
}
}
|