三级联动文件上传接口调用

最新推荐文章于 2021-11-02 17:20:59 发布

筱子辰

最新推荐文章于 2021-11-02 17:20:59 发布

阅读量125

点赞数

本文链接：https://blog.csdn.net/qq_42839386/article/details/117165185

版权

public function next()//三级联动方法
{
    $pid = input('pid');
    $minu1 = Category::where('pid',$pid)->select();
    return json(['code'=>200,'msg'=>'请求成功','data'=>$minu1]);
}

public function file()//文件上传方法
{
    $file = request()->file('file');
    if($file){
        $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
        if($info){
            $src = '/uploads' . DS .$info->getSaveName();
        }else{
            return json(['code'=>500,'msg'=>$info->getError(),'data'=>'']);
        }
    }return json(['code'=>200,'msg'=>'上传成功','data'=>['src'=>$src]]);
}

<script>
    //Demo
    layui.use(['form','upload','jquery','element'], function(){
        var form = layui.form;
        var upload = layui.upload;
        var $ = layui.jquery;
        var element = layui.element;
        var token=localStorage.getItem('token');
        //监听提交
        form.on('submit(formDemo)', function(data){
            console.log()
            return false;
        });

        form.on('select(minu1)',function (data){
            var pid = data.value
            var str = '<option value="">请选择</option>'
            $.ajax({
                url: '/admin/brand/next?token='+token+'&pid='+pid,
                dataType:'json',
                success:function (e){
                    $.each(e.data,function (k,v){
                        str+='<option value="'+v.id+'">'+v.cate_name+'</option>'
                    })
                    $("#minu2").html(str)
                    form.render('select');
                },
                error:function (e){
                    console.log(e)
                }
            })
            return false;
        });

        form.on('select(minu2)',function (data){
            var pid = data.value
            var str = '<option value="">请选择</option>'
            $.ajax({
                url: '/admin/brand/next?token='+token+'&pid='+pid,
                dataType:'json',
                success:function (e){
                    $.each(e.data,function (k,v){
                        str+='<option value="'+v.id+'">'+v.cate_name+'</option>'
                    })
                    $("#minu3").html(str)
                    form.render('select');
                },
                error:function (e){
                    console.log(e)
                }
            })
            return false;
        });

        //执行实例
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            ,url: '/admin/brand/file?token='+token //上传接口
            ,multiple:true
            ,done: function(res){
                $str = $("#logo").val();
                if ($str == ""){
                    $str = res.data.src
                }else {
                    $str += ',' + res.data.src
                }
                $("#logo").val($str);
                console.log($str)
            }
            ,error: function(res){
                console.log(res.msg)
            }
        });
    });
</script>

<div class="layui-form-item">
    <div class="layui-form-item">
        <label class="layui-form-label">品牌分类</label>
        <div class="layui-input-inline">
            <select name="minu1" id="minu1" lay-filter="minu1">
                <option value="">请选择</option>
                {foreach $minu1 as $v}
                    <option value="{$v.id}">{$v.cate_name}</option>
                {/foreach}
            </select>
        </div>
        <div class="layui-input-inline">
            <select name="minu2" id="minu2" lay-filter="minu2">
                <option value="">请选择</option>
            </select>
        </div>
        <div class="layui-input-inline">
            <select name="minu3" id="minu3" lay-filter="minu3">
                <option value="">请选择</option>
            </select>
        </div>
    </div>
</div>
<div class="layui-form-item">
    <label class="layui-form-label">品牌logo</label>
    <button type="button" class="layui-btn" id="test1">
        <i class="layui-icon">&#xe67c;</i>上传图片
    </button>
    <input type="hidden" name="logo" value="" id="logo">
</div>