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消除window.close()的提示窗口
May 20 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
Aug 24 Javascript
JavaScript正则表达式匹配 div  style标签
Mar 15 Javascript
jQuery中animate的几种用法与注意事项
Dec 12 Javascript
Vue.js中的图片引用路径的方式
Jul 28 Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
Feb 13 Javascript
浅谈Javascript中的对象和继承
Apr 19 Javascript
解决layui页面按钮点击无反应,也不报错的问题
Sep 29 Javascript
微信小程序实现搜索功能
Mar 10 Javascript
electron踩坑之remote of undefined的解决
Oct 06 Javascript
Vue router安装及使用方法解析
Dec 02 Vue.js
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
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的FTP学习(三)
2006/10/09 PHP
合并ThinkPHP配置文件以消除代码冗余的实现方法
2014/07/22 PHP
PHP使用逆波兰式计算工资的方法
2015/07/29 PHP
php生成Android客户端扫描可登录的二维码
2016/05/13 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
PHP实现非阻塞模式的方法分析
2018/07/26 PHP
jquery 插件实现图片延迟加载效果代码
2010/02/06 Javascript
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
jquery中prop()方法和attr()方法的区别浅析
2013/09/06 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
2014/01/06 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
2015/11/17 Javascript
微信小程序实现获取小程序码和二维码java接口开发
2019/03/29 Javascript
js中async函数结合promise的小案例浅析
2019/04/14 Javascript
elementUI Tree 树形控件的官方使用文档
2019/04/25 Javascript
vue设置动态请求地址的例子
2019/11/01 Javascript
[01:02]2014 DOTA2国际邀请赛中国区预选赛 现场抢先看
2014/05/22 DOTA
[01:11:15]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python requests发送post请求的一些疑点
2018/05/20 Python
tensorflow实现简单的卷积网络
2018/05/24 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
python实现超级马里奥
2020/03/18 Python
HTML5 常见面试题之PC端和移动端区别介绍
2018/01/22 HTML / CSS
独特的礼品和创新的科技产品:The Grommet
2018/02/24 全球购物
泰国国际航空公司官网:Thai Airways International
2019/12/04 全球购物
法国在线药房:1001Pharmacies
2021/03/07 全球购物
体育教育专业毕业生自荐信
2013/11/15 职场文书
数控专业应届生求职信
2013/11/27 职场文书
电气工程师岗位职责
2014/01/01 职场文书
最新会计专业求职信范文
2014/01/28 职场文书
珍珠鸟教学反思
2014/02/01 职场文书
主持词开场白
2014/03/17 职场文书
环保专项行动方案
2014/05/12 职场文书
公司开业庆典策划方案
2014/06/04 职场文书
停水通知
2015/04/16 职场文书
2016十一国庆节感言
2015/12/09 职场文书
详解Redis的三种常用的缓存读写策略步骤
2022/05/06 Redis