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 相关文章推荐
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
Apr 20 Javascript
jQuery TextBox自动完成条
Jul 22 Javascript
jquery tab标签页的制作
May 10 Javascript
Javascript 面向对象 对象(Object)
May 13 Javascript
javascript 基础篇4 window对象,DOM
Mar 14 Javascript
js onmousewheel事件多次触发问题解决方法
Oct 17 Javascript
完善的jquery处理机制
Feb 21 Javascript
JavaScript模仿Pinterest实现图片预加载功能
Oct 25 Javascript
html5+canvas实现支持触屏的签名插件教程
May 08 Javascript
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
JS闭包的几种常见形式实例详解
Sep 16 Javascript
在vue中通过axios异步使用echarts的方法
Jan 13 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 Ajax实现页面无刷新发表评论
2007/01/02 PHP
php数组函数序列之array_unique() - 去除数组中重复的元素值
2011/10/29 PHP
Apache无法自动跳转却显示目录的解决方法
2020/11/30 PHP
php cookie用户登录的详解及实例代码
2017/01/03 PHP
Jquery中显示隐藏的实现代码分析
2011/07/26 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
2013/12/12 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
2016/09/15 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
2016/09/28 Javascript
JS实现拖动滚动条评分的效果代码分享
2016/09/29 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
2016/12/16 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
2017/01/21 Javascript
vue中如何引入jQuery和Bootstrap
2017/04/10 jQuery
JavaScript for循环 if判断语句(学习笔记)
2017/10/11 Javascript
原生js调用json方法总结
2018/02/22 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
2018/02/26 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
2020/03/10 Javascript
jQuery+ajax实现文件上传功能
2020/12/22 jQuery
python遍历目录的方法小结
2016/04/28 Python
全面了解Python环境配置及项目建立
2016/06/30 Python
Python编程之变量赋值操作实例分析
2017/07/24 Python
Pycharm小白级简单使用教程
2020/01/08 Python
css3 给背景设置渐变色的方法
2019/09/12 HTML / CSS
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
兰蔻英国官网:Lancome英国
2019/04/30 全球购物
实习生个人找工作的自我评价
2013/10/30 职场文书
迅雷Cued工作心得体会
2014/01/27 职场文书
人事专员的岗位职责
2014/03/01 职场文书
小学清明节活动总结
2014/07/04 职场文书
教师求职信怎么写
2015/03/20 职场文书
《蜜蜂引路》教学反思
2016/02/22 职场文书
分家协议书范本
2016/03/22 职场文书
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
2021/04/01 PHP
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android
深入解读Java三大集合之map list set的用法
2021/11/11 Java/Android
浅谈css清除浮动(clearfix和clear)的用法
2023/05/21 HTML / CSS