联系官方销售客服

1835022288

028-61286886

分享经验 版主:论坛审计组
layui文件上传组件配合后台代码进行文件上传
类型:迅睿CMS 更新时间:2024-08-14 17:08:03

layui文件上传组件配合后台代码进行文件上传

html部分代码

                        <div style="margin-left: 110px;text-align: center;" class="layui-upload">
                            <input type="hidden" name="head[0]" lay-verify="head" id="head" value=""> //这里是文件上传字段对应的name值,
                            完成上传之后,要把返回的id赋值给value
                            <button type="button" class="layui-btn" id="upload">
                                <i class="layui-icon">&#xe608;</i> 文件上传
                            </button>
                            <div class="layui-upload-list">
                                <img style="width: 140px; height: 180px; border: 0.5px solid " class="layui-upload-img" id="imgUpload">
                                <p id="demoText"></p>
                            </div>
                        </div>


js部分代码

layui.use('upload', function(){
                var $ = layui.jquery
                    ,upload = layui.upload;
                var uploadInst = upload.render({
                    elem: '#upload'+n,
                    url: '/admin.php?s=census&c=home&m=upload',
                    field: "file_data",
                    data: {
                        file_data: function(){
                            return $('#upload'+n).val();
                        },
                {csrf_token()} : "{csrf_hash()}"
            },
                before: function(obj){
                    //预读本地文件示例,不支持ie8
                    obj.preview(function(index, file, result){
                        $('#imgUpload'+n).attr('src', result); //图片链接(base64)
                    });
                },
                done: function(res){
                    if (!res.id){
                        return layer.msg('<span style="color: #fff">'+res.msg+'</span>');
                    }else {
                        if(res.code == 1){
                            $("#head"+n).attr("value", res.id);  //这里是上传完成之后,将文件返回的id赋值给了head字段对应的表单的value
                            return layer.msg('<span style="color: #fff">上传成功</span>');
                        }else{
                            return layer.msg('<span style="color: #fff">上传失败,请重试!</span>');
                        }
                    }
                },
                error: function(){
                    //请求异常回调
                }
            });

php部分代码

public function upload() {
        $files = $this->request->getFiles();
        $p['exts'] = $files['file_data']->getClientExtension();
        $p['size'] = 100;

        // 验证上传权限
        $rt = \Phpcmf\Service::L('upload')->upload_file([
            'path' => '',
            'form_name' => 'file_data',
            'file_exts' => @explode(',', $p['exts']),
            'file_size' => (int)$p['size'] * 1024 * 1024,
            'attachment' => \Phpcmf\Service::M('Attachment')->get_attach_info(),
        ]);
        if (!$rt['code']) {
            exit(dr_array2string($rt));
        }

        // 附件归档
        $data = \Phpcmf\Service::M('Attachment')->save_data($rt['data']);
        if (!$data['code']) {
            exit(dr_array2string($data));
        }

        // 上传成功
        if (IS_API_HTTP) {
            $data['data'] = [
                'id' => $data['code'],
                'url' => $rt['data']['url'],
            ];
            exit(dr_array2string($data));
        } else {
            exit(dr_array2string(['code' => 1, 'msg' => dr_lang('上传成功'), 'id' => $data['code'], 'info' => $rt['data']]));
        }

    }


回帖
  • 五金冲压件
    #1楼    五金冲压件
    2020-07-09 22:03:17
    Chrome 0
    得得得
  • K大帅
    #2楼    K大帅
    2020-07-11 21:23:14
    Chrome 0
    本部分内容设定了隐藏,需要回复后才能看到,立即回复
  • 琉惗
    #3楼    琉惗
    2020-07-13 15:49:54
    Chrome 0
    K大帅1
  • gkimjatl
    #4楼    gkimjatl
    2020-07-16 10:59:25
    Chrome 0
    进来学习的
  • gkimjatl
    #5楼    gkimjatl
    2020-07-16 11:00:21
    Chrome 0
    进来学习的
  • chengjp
    #6楼    chengjp
    2020-08-28 20:14:50
    Chrome 0
    看看写的怎么样
  • 帝云网络
    #7楼    帝云网络
    2020-09-01 12:30:19
    Chrome 0
    回复学习一下!!!!
  • 陈生生
    #8楼    陈生生
    2020-09-12 09:59:05
    Chrome 0
    进来学习的
  • 流浪的乞丐
    #9楼    流浪的乞丐
    2020-09-26 19:02:40
    小米手机 0
    学习学习!!!
  • 猴子哥哥
    #10楼    猴子哥哥
    2020-12-13 10:20:35
    Chrome 0
    学习学习!!!
  • xhj800311
    #11楼    xhj800311
    2021-01-04 19:43:40
    华为手机 0
    学习一下
  • 找寻知音
    #12楼    找寻知音
    2021-01-05 07:16:48
    华为手机 0
    学习,谢谢
  • howru520
    #13楼    howru520
    2021-01-08 12:21:14
    Chrome 0
    我是来学习的
  • 过把瘾
    #14楼    过把瘾
    2021-02-02 21:53:46
    Chrome 0
    进来学习的
  • 飞鱼
    #15楼    飞鱼
    2021-02-03 16:52:52
    Chrome 0
    这种看个帖子都要回复!烦!
  • 菜鸟一枚
    #16楼    菜鸟一枚
    2021-02-26 12:51:28
    Edge 0
    来学习,感谢
  • 3038404899
    #17楼    3038404899
    2022-04-09 11:35:13
    Chrome 0
    来学习,感谢
  • 紫筱姣姣
    #18楼    紫筱姣姣
    2022-12-20 16:26:48
    Chrome 1
    来学习,感谢
  • 善于表达
    #19楼    善于表达
    2022-12-28 15:22:14
    华为手机 1
    学习,学习 谢谢
  • zhangxiang
    #20楼    zhangxiang
    2022-12-29 12:47:42
    Chrome 0
    看看写的怎么样
  • y87533643
    #21楼    y87533643
    2023-01-31 22:13:14
    Edge 0
    看看写的怎么样
  • y87533643
    #22楼    y87533643
    2023-02-16 20:44:25
    Edge 0
    看看写的怎么样
  • criminalist
    #23楼    criminalist
    2023-04-16 16:35:50
    Chrome 0
    看看写的怎么样
  • 执伞人
    #24楼    执伞人
    2023-08-08 09:45:08
    Chrome 0
    看看写的怎么样
  • PHP学生
    #25楼    PHP学生
    2023-08-10 16:59:28
    Chrome 0
    进来学习的
  • 芝麻通
    #26楼    芝麻通
    2023-09-08 10:09:00
    Chrome 0
    学习一下学习一下
  • jqyy
    #27楼    jqyy
    2023-09-08 16:48:45
    Edge 0
    进来学习的
  • 秦
    #28楼    秦
    2023-09-14 22:48:13
    Chrome 0
    学习学习学习学习
  • 爬树蜗牛
    #29楼    爬树蜗牛
    2024-08-09 19:09:50
    Chrome 0
    • 进来学习的,学习一下

  • 爬树蜗牛
    #30楼    爬树蜗牛
    2024-08-09 19:15:08
    Chrome 0
    K大帅 学习一下高手间的对话
  • somexi
    #31楼    somexi
    2024-08-14 17:08:03
    Chrome 0
    如何安装?有直接打包覆盖的文件吗