博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
layui 之 upload组件
阅读量:6504 次
发布时间:2019-06-24

本文共 1585 字,大约阅读时间需要 5 分钟。

hot3.png

场景:

1、处于新增页面;

2、表单基本数据与附件想一次提交;

3、需要异步处理;

处理逻辑:

1、先ajax提交基本信息;

2、返回数据ID;

3、携带ID并提交file文件上传;

4、提示上传成功(或处理成功)。

但是layui官网并没有讲解如何在此场景下的参数传递,那么会面临id无法传递的问题;

其实只要在before方法中,赋值参数即可。(this.data={'':''};)

layui 2.1.0

,before: function(obj){           layer.load(); //上传loading          this.data={'id':$("#docId").val()}; }

完整如下:

$.ajax({    url:"form/….",    data:params,    dataType:"json",    type:"POST",    success:function (data) {         $("#docId").val(data.data);         //成功之后执行附件上传         uploadInst.upload();     }          })layui.use('upload', function() {            var $ = layui.jquery, upload = layui.upload;            //选完文件后不自动上传            uploadInst =  upload.render({                elem: '#fileBtn'                ,url: 'url/upload'                ,auto: false                //,multiple: true                ,bindAction: '#bindBtn'                ,accept: 'file'                ,done: function(res){                    if(res.ret == 1){ //上传成功                        layer.closeAll('loading'); //关闭loading                        showMsg("上传成功!");                    }else{                        layer.closeAll('loading'); //关闭loading                        showMsg("上传失败!");                    }                }                ,before: function(obj){                    layer.load(); //上传loading                    this.data={'id':$("#docId").val()};                }                ,choose: function(obj){                }                ,error: function(index, upload){                 }            });        });

转载于:https://my.oschina.net/gmarshal/blog/1614961

你可能感兴趣的文章
《中国人工智能学会通讯》——6.6 实体消歧技术研究
查看>>
如何在Windows查看端口占用情况及查杀进程
查看>>
云存储应用Upthere获7700万美元股权债务融资
查看>>
国家互联网应急中心何世平博士主题演讲
查看>>
洗茶,你误会了多少年?
查看>>
移动大数据“后市场”受青睐 亟需数据深度学习人才
查看>>
贵阳高新区力争打造“千亿级大数据园区”
查看>>
安防众筹不止于卖产品 思维拓展刺激消费
查看>>
OpenSSH曝高危漏洞 会泄露私钥
查看>>
艾特网能获2016APCA用户满意品牌大奖
查看>>
《CCNP TSHOOT 300-135学习指南》——第2章 结构化故障检测与排除进程
查看>>
《Java EE 7精粹》—— 2.5 非阻塞I/O
查看>>
《Python数据科学实践指南》一2.2 字符串
查看>>
《R数据可视化手册》——1.1 安装包
查看>>
《iOS创意程序设计家》——导读
查看>>
spring-aop
查看>>
android RecycleView Adapter简单封装
查看>>
PgSQL · 案例分享 · 递归收敛优化
查看>>
Dart的数据库操作
查看>>
Codeforces 591 B Rebranding【Codeforces Round #327 (Div. 2)】
查看>>