layui upload form提交_radio单选按钮监听事件实现方法 (LayUI)

但是在搜索经验的时候,发现很多网友给出的代码有缺失,不适合小白开发

所以,小小整理一番,欢迎指摘 …

操作步骤:

首先 html 设计效果如下:

d3c7a5b85265a6a508a141f5e5b52141.png

对应的源码为:

 
主题类型:

【注】:

注意上述源码总的 "lay-filter" 属性;

此处需要填写一个用于区分监听事件的名称,我定为:"levelM"

因为鄙人在进行 ThinkPHP 框架代码开发,所以其中牵扯到了部分内置代码,可自行忽略

然后就是 JavaScript 代码的编写,完整的代码如下:

    layui.use(['form'], function () {    var upload = layui.upload;    var form = layui.form;    //此处即为 radio 的监听事件    form.on('radio(levelM)', function(data){    console.log(data.elem); //得到radio原始DOM对象console.log(data.value); //被点击的radio的value值        var level = data.value;//被点击的radio的value值        $(".sel-parent-msg").hide();        $(".sel-parent-msg-"+level).show();    });    });

好像,大概,也许,差不多就是这样的了 …

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您好,关于多个文件上传和提交同时进行的控制,可以使用 layui.upload 的 before 函数来实现。 示例代码如下: ``` layui.use('upload', function(){ var upload = layui.upload; //多文件列表示例 var demoListView = $('#demoList'), uploadListIns = upload.render({ elem: '#testList', url: '/upload/', accept: 'file', multiple: true, auto: false, bindAction: '#testListAction', choose: function(obj){ var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列 //读取本地文件 obj.preview(function(index, file, result){ var tr = $(['<tr id="upload-'+ index +'">', '<td>'+ file.name +'</td>', '<td>'+ (file.size/1014).toFixed(1) +'kb</td>', '<td>等待上传</td>', '<td>', '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>', '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>', '</td>', '</tr>'].join('')); //单个重传 tr.find('.demo-reload').on('click', function(){ obj.upload(index, file); }); //删除 tr.find('.demo-delete').on('click', function(){ delete files[index]; //删除对应的文件 tr.remove(); uploadListIns.config.elem.next()[0].value = ''; //清空 input file ,以免删除后出现同名文件不可选 }); demoListView.append(tr); }); }, before: function(obj){ layer.load(); //上传loading //模拟loading setTimeout(function(){ layer.closeAll('loading'); }, 2000); }, done: function(res, index, upload){ if(res.code == 0){ //上传成功 var tr = demoListView.find('tr#upload-'+ index), tds = tr.children(); tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>'); tds.eq(3).html(''); //清空操作 return delete this.files[index]; //删除文件队列已经上传成功的文件 } this.error(index, upload); }, error: function(index, upload){ var tr = demoListView.find('tr#upload-'+ index), tds = tr.children(); tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>'); tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传 } }); }); ``` 其中,before 函数用于上传之前的处理,这里可以添加 loading 等提示信息,确保上传过程中用户可以看到正在处理。 另外,由于 layui.upload 是基于 layui.form 实现的,所以在页面中需要有一个 form 标签,同时需要设置一个 bindAction 参数指向提交按钮,这样在上传完成后才能触发表单提交。 希望这个示例代码能够帮助到您。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值