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 相关文章推荐
删除重复数据的算法
Nov 23 Javascript
JavaScript 事件参考手册
Dec 24 Javascript
JS 文字符串转换unicode编码函数
May 30 Javascript
原生js实现给指定元素的后面追加内容
Apr 10 Javascript
jquery的each方法使用示例分享
Mar 25 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
Jan 13 Javascript
JavaScript头像上传插件源码分享
Mar 29 Javascript
jQuery实现图像旋转动画效果
May 29 Javascript
Angular4 Select选择改变事件的方法
Oct 09 Javascript
Bootstrap table 服务器端分页功能实现方法示例
Jun 01 Javascript
Element PageHeader页头的使用方法
Jul 26 Javascript
原生js实现放大镜组件
Jan 22 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
星际争霸任务指南——人族
2020/03/04 星际争霸
Zend Studio (eclipse)使用速度优化方法
2011/03/23 PHP
PHP5中实现多态的两种方法实例分享
2014/04/21 PHP
PHP的压缩函数实现:gzencode、gzdeflate和gzcompress的区别
2016/01/27 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
php简单计算年龄的方法(周岁与虚岁)
2016/12/06 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
js 单引号 传递方法
2009/06/22 Javascript
jquery限制输入字数,并提示剩余字数实现代码
2012/12/24 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
JavaScript创建对象_动力节点Java学院整理
2017/06/27 Javascript
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
JS实现的汉字与Unicode码相互转化功能分析
2018/05/25 Javascript
说说如何在Vue.js中实现数字输入组件的方法
2019/01/08 Javascript
JavaScript实现指定数量的并发限制的示例代码
2020/03/10 Javascript
vue实现拖拽进度条
2021/03/01 Vue.js
[01:25:33]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第二场 12.20
2020/12/23 DOTA
python更改已存在excel文件的方法
2018/05/03 Python
python 随机打乱 图片和对应的标签方法
2018/12/14 Python
Django用户认证系统 User对象解析
2019/08/02 Python
pytorch 输出中间层特征的实例
2019/08/17 Python
python学生信息管理系统实现代码
2019/12/17 Python
python 使用raw socket进行TCP SYN扫描实例
2020/05/05 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
梵蒂冈和罗马卡:Omnia Card Pass
2018/02/10 全球购物
关于廉洁的广播稿
2014/01/30 职场文书
防灾减灾宣传标语
2014/10/07 职场文书
2015元旦联欢晚会结束语
2014/12/14 职场文书
小学新教师个人总结
2015/02/05 职场文书
美丽心灵观后感
2015/06/01 职场文书
观后感的写法
2015/06/19 职场文书
结婚喜宴祝酒词
2015/08/10 职场文书
学校就业保障协议书
2019/06/24 职场文书
团组织关系介绍信
2019/06/24 职场文书
Android基础入门之dataBinding的简单使用教程
2022/06/21 Java/Android