本文实例讲述了tp5框架基于ajax实现异步删除图片的方法，分享给大家供大家参考，具体如下：

为了提高用户体验，我们为商品相册制作了ajax无刷新异步删除的功能，过程和方法还是非常值得借鉴的，效果如下：

上面的图片列表中，你点一下旁边的减号就会在不需要刷新当前页面的情况下不光从网页页面上删除图片，也会从服务器端删除该图片，看看我们的核心处理代码吧：

首先是客户端的js代码：

1. function delrow(o){ 
2. if(confirm('确定要删除该图吗？')){ 
3. var div=$(o).parent().parent(); 
4. var id=div.attr('id'); 
5. $.ajax({ 
6. type:"POST", 
7. data:{id:id}, 
8. url:"{:url('Goods/ajaxdelpic')}", 
9. success:function(data){ 
10. if(data==1){ 
11. div.remove(); 
12. }else{ 
13. alert('删除失败！'); 
14. } 
15. } 
16. }); 
17. } 
18. } 

当请求发送到服务器端的时候我们是这样处理的：

1. // 异步删除商品相册图片public function ajaxdelpic($id){ 
2. $gphoto=db('goods_photo'); 
3. $gphotos=$gphoto->find($id); 
4. $ogPhoto=IMG_UPLOADS.$gphotos['og_photo']; 
5. $bigPhoto=IMG_UPLOADS.$gphotos['big_photo']; 
6. $midPhoto=IMG_UPLOADS.$gphotos['mid_photo']; 
7. $smPhoto=IMG_UPLOADS.$gphotos['sm_photo']; 
8. @unlink($ogPhoto); 
9. @unlink($bigPhoto); 
10. @unlink($midPhoto); 
11. @unlink($smPhoto); 
12. $del=$gphoto->delete($id); 
13. if($del){ 
14. echo 1; 
15. }else{ 
16. echo 2; 
17. } 
18. }

Tags: tp5异步删除 ajax异步删除

分享到：