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

迅睿框架 更新 2025-03-29 11:25:37 琉惗

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

  • 爬树蜗牛 #30 · 2024-08-09 19:15:08
    K大帅 学习一下高手间的对话
  • somexi #31 · 2024-08-14 17:08:03
    如何安装?有直接打包覆盖的文件吗
  • baiducms #32 · 2025-03-14 12:10:26
    layui上传 显示:找不到临时文件 ?
  • 2291197393 #33 · 2025-03-29 11:25:37
    看看答案333看看答案333看看答案333看看答案333看看答案333

迅睿系统漏洞

GeoSeo收录宝
GeoSeo收录宝(2026-09-01)
升级 ai智能发布功能 升级 支持8国语言后端设置和前端输出功能 ...
Word发布批量上传
Word发布批量上传(2026-08-31)
版本覆盖问题重发
多语言翻译Seolang
多语言翻译Seolang(2026-08-31)
新增 LLM 大模型对话翻译模块 配置层强类型化重构 URL 模...
自定义存储
自定义存储(2026-08-30)
同步服务器端通用版实现,统一管理端、CMS 端和浏览器直传的提示与错...
GeoSeo工具箱
GeoSeo工具箱(2026-08-29)
新增 bing推送 新增 IndexNow推送 新增 baidu...
外贸多语言建站
外贸多语言建站(2026-08-27)
新增阿里云专业版入口 新增阿里云自动识别字符格式
Querylist渐进式采集
Querylist渐进式采集(2026-08-26)
增加范围截取规则
实时任务
实时任务(2026-08-26)
补充并整理完整使用说明、历史版本更新日志,统一帮助页样式。