tp5中封装上传组件教程-基于layui，适用于所有tp版本【多图上传版本】

##### 基于tp5的上传封装适合一个页面需要上传多个图片的情况

###### 	1：在common.php中添加如下防范

````
function uploader($input_name="img",$img=""){
    $url = url('business/Upload/upload');
    if($img){
        //input框的状态
        $input_str = '<input type="hidden" value="'.$img.'" name="'.$input_name.'">';
        //预览图
        $img_str = '<img id="kzl_preview_img'.$input_name.'" src="'.$img.'">';
        //预览图中关闭按钮的状态
        $clode_status = "block";
    }else{
        $input_str = '<input type="hidden" name="'.$input_name.'">';
        $img_str = '<img id="kzl_preview_img'.$input_name.'" src="data:image/png;base64,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">';
        $clode_status = "none";
    }
    $uploader_html = <<<EOT
<style>
        #kzl_upload{$input_name} #kzl_uploader{$input_name}{float: left;}
        #kzl_upload{$input_name} #kzl_preview{$input_name}{float:left; margin-left: 15px; max-width: 258px; max-height: 135px;}
        #kzl_upload{$input_name} #kzl_close_btn{$input_name} .icon{font-size: 30px; color: red; position: absolute; margin-left: -15px; margin-top: -15px;}
        #kzl_upload{$input_name} #kzl_preview{$input_name} img{max-width: 258px; max-height: 135px;}
</style>
    <div id="kzl_upload{$input_name}">
        {$input_str}
        <div class="layui-upload-drag" id="kzl_uploader{$input_name}" >
            <i class="layui-icon">?</i>
            <p>点击上传，或将文件拖拽到此处</p>
        </div>
        <div id="kzl_preview{$input_name}">
            {$img_str}
        </div>
        <div id="kzl_close_btn{$input_name}" style="display: {$clode_status}">
            <i onclick="re_upload{$input_name}()" class="layui-icon layui-icon-close-fill icon">ဇ</i>
        </div>
    </div>
    <script>
        layui.use('upload', function(){
            var upload = layui.upload;
            var url = "{$url}";
            //执行实例
            var uploadInst = upload.render({
                elem: '#kzl_uploader{$input_name}' //绑定元素
                ,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{$input_name}").css("display","block");
                        var img = res.data;
                        $("#kzl_preview_img{$input_name}").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{$input_name}() {
            $("#kzl_preview_img{$input_name}").attr("src","data:image/png;base64,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");
            $("#kzl_close_btn{$input_name}").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 = Request::domain().'/public/uploads/'.$info->getSaveName();
                $data['code'] = 1;
                $data['msg'] = "上传成功";
                $data['data'] = $path;
                echo json_encode($data);die;
            }else{
                // 上传失败获取错误信息
                echo $file->getError();
            }
        }
    }</pre>
````

###### 3：引用
````
{:uploader('agreement_img','')}
{:uploader('agreement_img','http://baidu.com/img1.img')}
````

注:原创不易,转载请注明出处( https://micuu.com/new/394.html )，本站所有资源来源于网络收集，如有侵权请联系QQ245557979进行清除。

tp5中封装上传组件教程-基于layui，适用于所有tp版本【多图上传版本】

留言反馈