基于webuploader上传组件的 图片编辑

浏览:3278 发布日期:2017/05/08 分类:ThinkPHP5专区 关键字: webuploader 上传图片 编辑图片 上传
webuploader挺好用,实现了上传,但是一直不知道如何再去编辑已提交的信息,作为新手很痛苦。
折腾大半天,基本算实现了已提交图片信息的编辑,勉强能用。留给新手借鉴。

希望大神能继续完善,还是有点儿小BUG: 读取现有图片后,再新增一张,不要上传,点新增图片的删除, 之前取出的已上传图片也被隐藏了。



视图里的JS,注意放在webuploader的初始化代码之后: //编辑已上传照片信息
        uploader.on('ready', function() {
            $statusBar.show(); //显示新增和上传按钮
            setState( 'ready' ); //重置上传按钮状态

            //载入现有照片
            $li = $('{volist name="$tptc.photo" id="vo"}' +
                                  '<li id="{$vo.id}" title ="{$vo.url}">' +
                                 '<p class="imgWrap"><img src="__ROOT__{$vo.url}"></p>' +
                                 '<p class="progress"><span></span></p>' +
                                 '</li>' +
                                 '<input type="hidden" name="photo[\'{$vo.id}\']" value="{$vo.url}">' +
                                 '{/volist}');

            //给li添加删除按钮
            $btns = $('<div class="file-panel" style="height: 30px;">' +
                    '<span class="cancel">删除</span>' +
                    '<b class="ysc">已上传</b></div>').appendTo( $li );
            $(".filelist").append( $li );

            //点击删除,提交给控制器进行删除操作     
            $(".cancel ").click(function(){
                
                //定义传给控制器的文件URL和照片ID
                var urlValue = '.' + $(this).closest('li').attr('title');
                var idValue =  $(this).closest('li').attr('id');

                //提交到控制器
                $.post('{:url("member/delfile")}',{'url':urlValue,'id':idValue},function(data){
                  
                  if(data.code == 200){
                    
                    //如删除成功,移除这个li
                    $("#"+idValue).remove();
                     alert(data.msg);
                  }else{
                     alert(data.msg);
                  }
                });
            });

         });
基于TP5的删除控制器:
这里不知为何,unlink删除成功可以正常返回,但删除失败的时候,不能返回flase,而是报文件不存在或其他错误;以至于前台不能正常提示:”删除失败”//单个删除图片文件,及数据库
    public function delfile(){

         if(request()->isAjax()){

             $url = input('post.url');
            $ids = input('post.id');

            $result = unlink($url);
            if ($result == true) {
                    db('photo')->where('id',$ids)->delete();
                    return json(array('code'=>200,'msg'=>'删除成功'));die;
                }else 
                    return json(array('code'=>0,'msg'=>'删除失败,请刷新页面'));
         }
     }
最佳答案
评论( 相关
后面还有条评论,点击查看>>