layer ui 导入文件之前传入数据的实例


Posted in Javascript onSeptember 23, 2019

最近用layer ui上传文件遇到了一个问题,我想在上传文件之前把data-id传入后台,layer文档找了一下也没有找到类似的说明,经过一番折腾发现了其中的窍门,这里记录一下

html代码

<button type="button" data-id="1" class="layui-btn test1">导入路由表</button>
<button type="button" data-id="2" class="layui-btn test1">导入路由表</button>
<button type="button" data-id="3" class="layui-btn test1">导入路由表</button>
<button type="button" data-id="4" class="layui-btn test1">导入路由表</button>

javascript代码

var uploadInst;//这里设置一个全局变量记录layer的对象

  $(".test1").click(function () {//这里绑定点击事件
    var game_id = $(this).attr('data-id');//取出data-id的值
    uploadInst.config.data.game_id=game_id//这里设置data的值之后就能传入后台了

  });
  layui.use('upload', function(){
    var upload = layui.upload;
    //执行实例
    uploadInst = upload.render({
      elem: '.test1' //绑定元素
      ,url: $("#upload_url").val()+'?game_id='+$("#get_data").val() //上传接口
      ,accept: 'file' //普通文件
      ,done: function(res){
        layer.msg(res.msg)
        //上传完毕回调
      }
      ,error: function(){
        //请求异常回调
      }
      ,before:function () {

      }
    });

  });

以上这篇layer ui 导入文件之前传入数据的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 面向对象继承
Nov 26 Javascript
JS在IE和FF下attachEvent,addEventListener学习笔记
Nov 26 Javascript
改进版通过Json对象实现深复制的方法
Oct 24 Javascript
日历查询的算法 如何计算某一天是星期几
Dec 12 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
Jan 24 Javascript
JavaScript面向对象的实现方法小结
Apr 14 Javascript
javascript实现仿腾讯游戏选择
May 14 Javascript
javascript中使用正则表达式清理table样式的代码
Apr 01 Javascript
浅谈js中调用函数时加不加括号的问题
Jul 28 Javascript
vue.js学习笔记之绑定style样式和class列表
Oct 31 Javascript
详解Vue源码中一些util函数
Apr 24 Javascript
在Angular项目使用socket.io实现通信的方法
Jan 05 Javascript
Node.js实现简单管理系统
Sep 23 #Javascript
webpack的pitching loader详解
Sep 23 #Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
Sep 23 #Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 #Javascript
小程序实现锚点滑动效果
Sep 23 #Javascript
React Native 混合开发多入口加载方式详解
Sep 23 #Javascript
Node.js HTTP服务器中的文件、图片上传的方法
Sep 23 #Javascript
You might like
php连接mysql数据库代码
2009/03/10 PHP
一个php生成16位随机数的代码(两种方法)
2014/09/16 PHP
php外部执行命令函数用法小结
2016/10/11 PHP
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
JavaScript 继承详解(四)
2009/07/13 Javascript
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
2009/08/03 Javascript
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
javascript 表单验证常见正则
2009/09/28 Javascript
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
js String对象中常用方法小结(字符串操作)
2012/01/27 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
javascript 分号总结及详细介绍
2016/09/24 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
利用three.js画一个3D立体的正方体示例代码
2017/11/19 Javascript
vue中rem的配置的方法示例
2018/08/30 Javascript
node.js中fs文件系统模块的使用方法实例详解
2020/02/13 Javascript
Vue 实例中使用$refs的注意事项
2021/01/29 Vue.js
[01:01:31]2018DOTA2亚洲邀请赛3月29日小组赛B组 Mineski VS paiN
2018/03/30 DOTA
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
浅谈插入排序算法在Python程序中的实现及简单改进
2016/05/04 Python
Python编程之基于概率论的分类方法:朴素贝叶斯
2017/11/11 Python
详解Python中的动态属性和特性
2018/04/07 Python
如何用Python合并lmdb文件
2018/07/02 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
python如何保证输入键入数字的方法
2019/08/23 Python
Python常用编译器原理及特点解析
2020/03/23 Python
举例讲解Python装饰器
2020/12/24 Python
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
2013/08/11 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
2013/01/06 HTML / CSS
如何避免常见的6种HTML5错误用法
2017/11/06 HTML / CSS
员工激励培训演讲稿
2014/09/16 职场文书
中学生旷课检讨书2篇
2014/10/09 职场文书
股权转让协议范本
2014/12/07 职场文书
2015年监理工作总结范文
2015/04/07 职场文书
大学生暑期社会实践的个人总结!
2019/07/17 职场文书
25张裸眼3D图片,带你重温童年的记忆,感受3D的魅力
2022/02/06 杂记