layui缩略图

发布时间:2021-07-02作者:小灵龙点击:198

<div class="layui-form-item">
                           <label class="layui-form-label">上传缩略图</label>
                           <div class="layui-input-block">
                               <button type="button" class="layui-btn" id="test1">
                              <i class="layui-icon">&#xe67c;</i>上传缩略图
                            </button>
                            <div class="layui-upload-list">
                                <img class="layui-upload-img" width="100px" height="100px" id="demo1">
                                <p id="demoText"></p>
                            </div>
                               <input type="hidden" name="product_icon" id="pichidden">

                           </div>
                       </div>    

 var uploadInst = upload.render({
                elem:'#test1'
                ,url:"{:url('allow/upload','field=product_icon')}"
                ,accept:'images'  // 允许上传的文件类型
                ,exts: 'jpg|png|jpeg'//允许上传的文件后缀
                ,acceptMime: 'image/*'//规定打开文件选择框时,筛选出的文件类型
                ,size:30//设置文件最大可允许上传的大小,单位 KB
                ,field:"product_icon"//设定文件域的字段名
                ,auto:true // 自动上传
                ,drag:false//是否接受拖拽的文件上传默认是
                ,before:function (obj) {
                    // console.log(obj);
                    // 预览
                    obj.preview(function(index,file,result) {
                        // console.log(file.name);    //图片地址
                        // console.log(file.type);    //图片格式
                        // console.log(file.size);    //图片大小
                        // console.log(file);    //图片地址
                        $('#demo1').attr('src',result); //图片链接 base64
                    });
                }
                // 上传成功回调
                ,done:function(res) {
                    console.log(res);
                    if (res.code == 1000) {
                        $("#pichidden").val(res.data);
                        layer.msg(res.msg);
                    }else{
                        layer.msg(res.msg,{icon:2});
                    }
                }
                // 上传失败回调
                ,error:function(index,upload) {
                    // 上传失败
                    console.log(index);

                }
            });

//执行产品图片上传
    public function upload($field){        

        //获取请求的数据
        $file=request()->file($field);

        $info=$file->move(ROOT_PATH.'public'.DS.'static'.DS.'admin'.DS.'image'.DS.$field);
        if($info){
            
            return json(['code'=>1000,'msg'=>'上传成功','data'=>$info->getSaveName()]);
            
        }else{
            return json(['code'=>1001,'msg'=>$file->getError(),'data'=>'']);
            
        }
    }
标签: