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 相关文章推荐
IE6与IE7中,innerHTML获取param的区别
Mar 15 Javascript
JQuery 网站换肤功能实现代码
Nov 02 Javascript
JavaScript 笔记二 Array和Date对象方法
May 22 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
Apr 22 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
Aug 23 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 Javascript
关于Vue.nextTick()的正确使用方法浅析
Aug 25 Javascript
微信小程序实现MUI数字输入框效果
Jan 31 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
Feb 06 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
Jul 22 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 Javascript
15个值得收藏的JavaScript函数
Sep 15 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时间戳使用实例代码
2008/06/07 PHP
PHP stristr() 函数(不区分大小写的字符串查找)
2010/06/03 PHP
PHP开发中四种查询返回结果分析
2011/01/02 PHP
PHP操作数组的一些函数整理介绍
2011/07/17 PHP
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
微信公众号开发之通过接口删除菜单
2017/02/20 PHP
再谈IE中Flash控件的自动激活 ObjectWrap
2007/03/09 Javascript
javascript 设计模式之单体模式 面向对象学习基础
2010/04/18 Javascript
利用JS来控制键盘的上下左右键(示例代码)
2013/12/14 Javascript
jquery队列queue与原生模仿其实现方法分享
2014/03/25 Javascript
JavaScript中使用Object.create()创建对象介绍
2014/12/30 Javascript
JQuery包裹DOM节点的方法
2015/06/11 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
2016/05/20 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
2016/08/03 Javascript
JS动态给对象添加属性和值的实现方法
2016/10/21 Javascript
js防刷新的倒计时代码 js倒计时代码
2017/09/06 Javascript
vue实现组件之间传值功能示例
2018/07/13 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
2020/09/10 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日 小组赛A组 TNC VS OpTic
2018/03/30 DOTA
基于python实现微信模板消息
2015/12/21 Python
Python黑魔法@property装饰器的使用技巧解析
2016/06/16 Python
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
python处理RSTP视频流过程解析
2020/01/11 Python
将keras的h5模型转换为tensorflow的pb模型操作
2020/05/25 Python
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
Sephora丝芙兰菲律宾官方网站:购买化妆品和护肤品
2017/04/05 全球购物
捷克时尚网上商店:OTTO
2018/03/15 全球购物
美国在线健康和美容市场:Pharmapacks
2018/12/05 全球购物
美赞臣新加坡官方旗舰店:Enfagrow新加坡
2019/05/15 全球购物
查询优化的一般准则有哪些
2015/03/08 面试题
《小壁虎借尾巴》教学反思
2014/02/16 职场文书
心理咨询专业自荐信
2014/07/07 职场文书
刑事附带民事上诉状
2015/05/23 职场文书
二审代理词范文
2015/05/25 职场文书
Python matplotlib可视化之绘制韦恩图
2022/02/24 Python