layui 文件上传

前端

       <div class="layui-upload">
            <button type="button" class="layui-btn" id="test1">上传图片</button>
                <input type="hidden" class="file" name="file" id="demoText" value="" >
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="image">
            </div>
            <div style="width: 95px;">
                <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                    <div class="layui-progress-bar" lay-percent=""></div>
                </div>
            </div>
        </div>
<script>
    layui.use([upload, element, layer], function() {
        var $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , layer = layui.layer;

        //常规使用 - 普通图片上传
        var uploadInst = upload.render({
            elem: #test1
            , url: "{:url(‘test/add/file‘)}" //此处用的是第三方的 http 请求演示,实际使用时改成您自己的上传接口即可。
            , before: function (obj) {
                //预读本地文件示例,不支持ie8
                obj.preview(function (index, file, result) {
                    $(#image).attr(src, result); //图片链接(base64)
                });

                element.progress(demo, 0%); //进度条复位
                layer.msg(上传中, {icon: 16, time: 0});
            }
            , done: function (res) {
                //如果上传成功
                if (res.code == 0) {
                    layer.msg(上传成功);
                }
                //上传成功的一些操作
                //……
                $(#demoText).val(res.data); //置空上传失败的状态
            }
            , error: function () {
                //演示失败状态,并实现重传
                var demoText = $(#demoText);
                demoText.html(<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>);
                demoText.find(.demo-reload).on(click, function () {
                    uploadInst.upload();
                });
            }
            //进度条
            , progress: function (n, elem, e) {
                element.progress(demo, n + %); //可配合 layui 进度条元素使用
                if (n == 100) {
                    layer.msg(上传完毕, {icon: 1});
                }
            }
        });
    });
</script>

后台

    public function file()
    {
        $file = request()->file(file);
        if($file){
            $info = $file->validate([ext=>png,jpg,jpeg])->move(ROOT_PATH . public . DS . uploads);
            if($info){
                $data[file] = DS . uploads . DS . $info->getSaveName();
//
生成缩略图
                $image = \think\Image::open(..$data[file]);
//这里是地址,必须拼接这个点不然找不到 $image
->thumb(200, 200)->save(..$data[file]); }else{ $this->error($file->getError()); } } return json([code=>0,msg=>成功,data=>$data[file]]); }

 

 public function save(Request $request)
    {
        $data = input();
        array_shift($data);
        $validate = Loader::validate(Add);

        if(!$validate->check($data)){
            $this->error($validate->getError());
        }
        $res = \app\test\model\Goods::create($data);
        if ($res){
            return  json([code=>0,msg=>添加成功,data=>$res]);
        }else{
            $this->error(失败);
        }
    }

 

layui 文件上传

上一篇:dev-cpp:如何去掉括号高亮和括号自动匹对


下一篇:Windows常用快捷键