Menu

tp5中封装上传组件教程-基于layui,适用于所有tp版本

发布时间:2019-08-28 17:10:10作者:热度: 765 ℃

下载链接在文章结束的位置

单图上传插件

依赖插件:

Jquery

Layui > 2.3.0

效果预览:



基于layui的上传插件,将上传功能进行封装!

可以传递参数 inputname值  和imgsrc

其中 name值必须,当src存在时,会显示src对应的图片

需要自己配后台上传接口


返回说明:

$path = 'public/uploads/'.$info->getSaveName();
$data['code'] = 1;
$data['msg'] = "上传成功";
$data['data'] = $path;
echo json_encode($data);die;

code = 1 code=200 时都位上传成功


使用说明:

1:将下述方法置于tp中的common.php公共方法中。


function uploader($input_name="img",$img=""){
    $url = url('Upload/upload');
    if($img){
        //input框的状态
        $input_str = '<input type="hidden" value="'.$img.'" name="'.$input_name.'">';
        //预览图
        $img_str = '<img id="kzl_preview_img" src="'.$img.'">';
        //预览图中关闭按钮的状态
        $clode_status = "block";
    }else{
        $input_str = '<input type="hidden" name="'.$input_name.'">';
        $img_str = '<img id="kzl_preview_img" src="data:image/png;base64,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">';
        $clode_status = "none";
    }
    $uploader_html = <<<EOT
<style>
        #kzl_upload #kzl_uploader{float: left;}
        #kzl_upload #kzl_preview{float:left; margin-left: 15px; max-width: 258px; max-height: 135px;}
        #kzl_upload #kzl_close_btn .icon{font-size: 30px; color: red; position: absolute; margin-left: -15px; margin-top: -15px;}
        #kzl_upload #kzl_preview img{max-width: 258px; max-height: 135px;}
</style>
    <div id="kzl_upload">
        {$input_str}
        <div class="layui-upload-drag" id="kzl_uploader" >
            <i class="layui-icon">?</i>
            <p>点击上传,或将文件拖拽到此处</p>
        </div>
        <div id="kzl_preview">
            {$img_str}
        </div>
        <div id="kzl_close_btn" style="display: {$clode_status}">
            <i onclick="re_upload()" class="layui-icon layui-icon-close-fill icon">&#x1007;</i>
        </div>
    </div>
    <script>
        layui.use('upload', function(){
            var upload = layui.upload;
            var url = "{$url}";
            //执行实例
            var uploadInst = upload.render({
                elem: '#kzl_uploader' //绑定元素
                ,url: url //上传接口
                ,before: function(obj){ //obj参数包含的信息,跟 choose回调完全一致,可参见上文。
                    layer.load(); //上传loading
                }
                ,done: function(res){
                    //上传完毕回调
                    layer.closeAll(); //关闭loading
                    if(res.code == 1 ||res.code ==200){
                        $("#kzl_close_btn").css("display","block");
                        var img = "http://hao.qudong.com/"+res.data;
                        $("#kzl_preview_img").attr("src",img);
                        $("input[name={$input_name}]").val(img);
                        layer.msg(res.msg,{icon:1});
                    }else {
                        layer.msg(res.msg,{icon:0});
                    }
                }
                ,error: function(){
                    //请求异常回调
                    layer.msg("上传出错,稍后重试",{icon:0});
                }
            });

        });
        //重新上传
        function re_upload() {
            $("#kzl_preview_img").attr("src","data:image/png;base64,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");
            $("#kzl_close_btn").css("display","none");
        }
    </script>
EOT;
    echo $uploader_html;

}

2:配置上传接口

public function upload()
    {
        $file = request()->file('file');
        // 移动到框架应用根目录/public/uploads/ 目录下
        if($file){
            $info = $file->validate(['size'=>3140000,'ext'=>'png,jpg,jpeg,gif'])->move(ROOT_PATH . 'public' . DS . 'uploads');
            if($info){               
                $path = '/public/uploads/'.$info->getSaveName();
                $data['code'] = 1;
                $data['msg'] = "上传成功";
                $data['data'] = $path;
                echo json_encode($data);die;              
            }else{
                // 上传失败获取错误信息
                echo $file->getError();
            }
        }
    }

仅供参考

3:使用方法

{:uploader('ssssssss','')}  //默认不传图
{:uploader('ssssssss','https://upload.qudong.com/2019/0827/1566871272919.jpg')}  //传图


好啦,上面就是简易教程,大家可以参考使用!

实例代码下载

米醋儿 micuer.com

程序员在线工具集

友情连接