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 相关文章推荐
jquery 新浪网易的评论块制作
Jul 01 Javascript
使用非html5实现js板连连看游戏示例代码
Sep 22 Javascript
setInterval计时器不准的问题解决方法
May 08 Javascript
bootstrap data与jquery .data
Jul 07 Javascript
js控制网页背景音乐播放与停止的方法
Feb 06 Javascript
javascript显式类型转换实例分析
Apr 25 Javascript
理解javascript闭包
Dec 15 Javascript
jQuery中text() val()和html()的区别实例详解
Jun 28 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
Jan 20 Javascript
详解Vue 如何监听Array的变化
Jun 06 Javascript
微信小程序弹窗禁止页面滚动的实现代码
Dec 30 Javascript
vue 数字翻牌器动态加载数据
Apr 20 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
Terran热键控制
2020/03/14 星际争霸
小偷PHP+Html+缓存
2006/11/25 PHP
浅谈PHP正则表达式中修饰符/i, /is, /s, /isU
2014/10/21 PHP
PHP中一些可以替代正则表达式函数的字符串操作函数
2014/11/17 PHP
浅析php创建者模式
2014/11/25 PHP
PHP获取ip对应地区和使用网络类型的方法
2015/03/11 PHP
PHP中JSON的应用技巧
2015/10/10 PHP
CodeIgniter扩展核心类实例详解
2016/01/20 PHP
php反射类ReflectionClass用法分析
2016/05/12 PHP
详解PHP序列化和反序列化原理
2018/01/15 PHP
让whoops帮我们告别ThinkPHP6的异常页面
2020/03/02 PHP
PHP dirname简单使用代码实例
2020/11/13 PHP
Jquery异步请求数据实例代码
2011/12/28 Javascript
JS合并数组的几种方法及优劣比较
2014/09/19 Javascript
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
JS添加删除DIV的简单实例
2016/07/08 Javascript
详解A标签中href=&quot;&quot;的几种用法
2017/08/20 Javascript
jQuery封装animate.css的实例
2018/01/04 jQuery
Vue服务器渲染Nuxt学习笔记
2018/01/31 Javascript
Angular7创建项目、组件、服务以及服务的使用
2019/02/19 Javascript
Vue 理解之白话 getter/setter详解
2019/04/16 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
更优雅的微信小程序骨架屏实现详解
2019/08/07 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
2019/11/17 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
2020/04/11 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
2020/05/11 Javascript
python:print格式化输出到文件的实例
2018/05/14 Python
Python正则表达式匹配数字和小数的方法
2019/07/03 Python
python 爬取腾讯视频评论的实现步骤
2021/02/18 Python
西班牙太阳镜品牌:Hawkers
2018/03/11 全球购物
澳大利亚家居用品零售商:Harris Scarfe
2020/10/10 全球购物
司机岗位职责
2013/11/15 职场文书
党员自我批评与反省材料
2014/02/10 职场文书
2014年城管工作总结
2014/11/20 职场文书
工厂仓管员岗位职责
2015/04/01 职场文书
党性修养心得体会2016
2016/01/21 职场文书