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 相关文章推荐
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
Jan 30 Javascript
jQuery参数列表集合
Apr 06 Javascript
JS中Iframe之间传值及子页面与父页面应用
Mar 11 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
Dec 16 Javascript
JavaScript基本语法学习教程
Jan 14 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
Aug 15 Javascript
详解自动生成博客目录案例
Dec 09 Javascript
在 webpack 中使用 ECharts的实例详解
Feb 05 Javascript
在vue中解决提示警告 for循环报错的方法
Sep 28 Javascript
Vuex 使用 v-model 配合 state的方法
Nov 13 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
Jun 24 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 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
实用函数5
2007/11/08 PHP
php5.3 废弃函数小结
2010/05/16 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(二)
2014/06/23 PHP
php从身份证获取性别和出生年月
2017/02/09 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
php实现微信企业转账功能
2018/10/02 PHP
利用JS重写Cognos右键菜单的实现代码
2010/04/11 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
2014/04/29 Javascript
JS简单获取及显示当前时间的方法
2016/08/03 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
2016/09/01 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
2017/07/25 Javascript
Angular ng-animate和ng-cookies用法详解
2018/04/18 Javascript
基于vue实现移动端圆形旋钮插件效果
2018/11/28 Javascript
深入浅出了解Node.js Streams
2019/05/27 Javascript
JS实现给数组对象排序的方法分析
2019/06/24 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
javascript实现摄像头拍照预览
2019/09/30 Javascript
Vue data的数据响应式到底是如何实现的
2020/02/11 Javascript
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
利用python实现命令行有道词典的方法示例
2017/01/31 Python
TensorFlow实现模型评估
2018/09/07 Python
Pycharm新建模板默认添加个人信息的实例
2019/07/15 Python
pycharm中import呈现灰色原因的解决方法
2020/03/04 Python
读群众路线心得体会
2014/03/07 职场文书
补充协议书范本
2014/04/23 职场文书
宣传工作经验材料
2014/06/02 职场文书
代理人委托书
2014/08/01 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
先进基层党组织事迹材料
2014/12/25 职场文书
观看建国大业观后感
2015/06/01 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers
pytorch实现线性回归以及多元回归
2021/04/11 Python
教你利用Nginx 服务搭建子域环境提升二维地图加载性能的步骤
2021/09/25 Servers
动画《朋友游戏》公开佐藤友生绘制的开播纪念绘
2022/04/06 日漫
Java版 简易五子棋小游戏
2022/05/04 Java/Android