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 相关文章推荐
extjs 为某个事件设置拦截器
Jan 15 Javascript
Javascript浅谈之引用类型
Dec 18 Javascript
jquery实现鼠标滑过显示提示框的方法
Feb 05 Javascript
移动端JQ插件hammer使用详解
Jul 03 Javascript
Bootstrap3学习笔记(三)之表格
May 20 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 Javascript
Webpack打包慢问题的完美解决方法
Mar 16 Javascript
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 Javascript
vue-resource + json-server模拟数据的方法
Nov 02 Javascript
JavaScript生成指定范围随机数和随机序列的方法
May 05 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
Mar 12 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
Jun 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 读取文件乱码问题
2010/02/20 PHP
PHP修改session_id示例代码
2014/01/08 PHP
php比较两个绝对时间的大小
2014/01/31 PHP
php生成图片缩略图功能示例
2017/02/22 PHP
PHP对象相关知识总结
2017/04/09 PHP
thinkphp 验证码 的使用小结
2017/05/07 PHP
windows环境下使用Composer安装ThinkPHP5
2018/05/18 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
学习YUI.Ext 第三天
2007/03/10 Javascript
jquery 新浪网易的评论块制作
2010/07/01 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
2011/11/30 Javascript
Javascript 键盘事件的组合使用实现代码
2012/05/04 Javascript
详细分析JavaScript函数定义
2015/07/16 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
利用jQuery实现简单的拖曳效果实例代码
2017/10/20 jQuery
Javascript Worker子线程代码实例
2020/02/20 Javascript
JS实现电脑虚拟键盘的操作
2020/06/24 Javascript
vue element和nuxt的使用技巧分享
2021/01/14 Vue.js
python传递参数方式小结
2015/04/17 Python
Python聚类算法之DBSACN实例分析
2015/11/20 Python
Python自动化测试Eclipse+Pydev 搭建开发环境
2016/08/15 Python
python画图系列之个性化显示x轴区段文字的实例
2018/12/13 Python
PyQt 图解Qt Designer工具的使用方法
2019/08/06 Python
Python Django框架url反向解析实现动态生成对应的url链接示例
2019/10/18 Python
python实现LRU热点缓存及原理
2019/10/29 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
Python pymsql模块的使用
2020/09/07 Python
Melissa鞋马来西亚官方网站:MDreams马来西亚
2018/04/05 全球购物
英国和国际包裹递送:ParcelCompare
2019/08/26 全球购物
什么是继承
2013/12/07 面试题
财务会计应届生求职信
2013/11/24 职场文书
2014年文学毕业生自我鉴定
2014/04/23 职场文书
爬山的活动方案
2014/08/16 职场文书
税务职业生涯规划书范文
2014/09/16 职场文书
2014年小学安全工作总结
2014/12/04 职场文书
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python