单图上传插件

依赖插件：

Jquery

Layui > 2.3.0

效果预览：

基于layui的上传插件，将上传功能进行封装！

可以传递参数 input的name值  和img的src值

其中 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 = '';
        //预览图
        $img_str = '';
        //预览图中关闭按钮的状态
        $clode_status = "block";
    }else{
        $input_str = '';
        $img_str = '';
        $clode_status = "none";
    }
    $uploader_html = <<
        #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;}

    

        {$input_str}
        

            ?
            
点击上传，或将文件拖拽到此处
        
        

            {$img_str}
        
        

            ဇ
        
    
    
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')}  //传图

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

实例代码下载