layui 上传文件_批量导入数据UI的方法


Posted in Javascript onSeptember 23, 2019

使用layui的文件上传组件,可以方便的弹出文件上传界面。

效果如下:

layui 上传文件_批量导入数据UI的方法

点击【批量导入】按钮调用js脚本importData(config)就可以实现数据上传到服务器。

脚本:

/***
 * 批量导入
 * config.downUrl 下载模板url
 * config.uploadUrl 上传文件url
 * config.msg
 * config.done 上传结束后执行。
 */
function importData(config){
	var default_config = {
			msg:"数据导入成功!"
	}
	$.extend( default_config, config);
	var idRandom = "importData" + Math.ceil(Math.random()*10000)
	var htmlContent = '<div class="layui-upload-drag" id="'+idRandom+'">';
	htmlContent += '<i class="layui-icon">?</i>';
	htmlContent += '<p>点击上传,或将文件拖拽到此处</p>';
	htmlContent += '</div>';
	
	layer.open({
	   type: 1
	   ,offset: "auto" //具体配置参考:http://www.layui.com/doc/modules/layer.html#offset
	   ,id: 'layer_importData' //防止重复弹出
	   ,title:'导入记录'
	   ,content: htmlContent
	   ,maxWidth:800
	   ,btn: ['下载模板']
	   ,btnAlign: 'c' //按钮居中
	   ,shade: 0 //不显示遮罩
	   ,yes: function(){//提交
	  	 	var iframe = $("<iframe></iframe>");
	  	 	iframe.attr("src",default_config.downUrl);
	  	 	iframe.css("display","none");
	  	 	$("#"+idRandom).append(iframe);
	   }
	});
	form.render();
	//拖拽上传
	upload.render({
	   elem: "#"+idRandom
	   ,url: default_config.uploadUrl
	   ,accept: 'file'
	   ,done: function(data){
	  	 if(data.code == 0){
	  	    	layer.closeAll();
	  	    	if($("#query")){
	  	    		$("#query").click();
	  	    	}
	  	    	if(default_config.done){
	  	    		default_config.done(data);
	  	    	}else{
	  	    		layer.msg(default_config.msg);
	  	    	}
 	    	}else{
 	    		layer.msg(data.msg);
 	    	}
	   }
	});
}

以上这篇layui 上传文件_批量导入数据UI的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript针对DOM的应用分析(四)
Apr 15 Javascript
JS正则表达式获取分组内容的方法详解
Nov 15 Javascript
jquery操作 iframe的方法
Dec 03 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
Jun 23 Javascript
js实现拖拽效果(构造函数)
Dec 14 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
Oct 17 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
Oct 21 Javascript
解决VUEX刷新的时候出现数据消失
Jul 03 Javascript
Scala解析Json字符串的实例详解
Oct 11 Javascript
vue.extend实现alert模态框弹窗组件
Apr 28 Javascript
vue动态注册组件实例代码详解
May 30 Javascript
微信小程序停止其他视频播放当前视频的实例代码
Dec 25 Javascript
Electron 调用命令行(cmd)
Sep 23 #Javascript
layui文件上传控件带更改后数据传值的方法
Sep 23 #Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
Sep 23 #Javascript
小程序实现上下移动切换位置
Sep 23 #Javascript
微信小程序分包加载代码实现方法详解
Sep 23 #Javascript
layui扩展上传组件模拟进度条的方法
Sep 23 #Javascript
layer扩展打开/关闭动画的方法
Sep 23 #Javascript
You might like
PHP 一个随机字符串生成代码
2010/05/26 PHP
android上传图片到PHP的过程详解
2015/08/03 PHP
在WordPress中实现评论头像的自定义默认和延迟加载
2015/11/24 PHP
微信开发之网页授权获取用户信息(二)
2016/01/08 PHP
使用JavaScript switch case 另类写法
2010/03/14 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
2014/01/27 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
2014/04/04 Javascript
Javascript中的方法和匿名方法实例详解
2015/06/13 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
2015/08/26 Javascript
Angular.js如何从PHP读取后台数据
2016/03/24 Javascript
JS匿名函数实例分析
2016/11/26 Javascript
详解基于mpvue的小程序markdown适配解决方案
2018/05/08 Javascript
微信小程序 行的删除和增加操作实现详解
2019/09/29 Javascript
ES6之Proxy的get方法详解
2019/10/11 Javascript
JS+DIV实现拖动效果
2020/02/11 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
vue中如何添加百度统计代码
2020/12/19 Vue.js
Win10下Python环境搭建与配置教程
2016/11/18 Python
Python编程使用*解包和itertools.product()求笛卡尔积的方法
2017/12/18 Python
微信跳一跳python代码实现
2018/01/05 Python
Python实现获取前100组勾股数的方法示例
2018/05/04 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
pandas删除指定行详解
2019/04/04 Python
python sqlite的Row对象操作示例
2019/09/11 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
HTML5中的Scoped属性使用实例
2014/04/23 HTML / CSS
老海军美国官网:Old Navy
2016/09/05 全球购物
瑞典Happy Socks美国官网:购买色彩斑斓的快乐袜子
2016/10/19 全球购物
车间组长岗位职责
2013/12/20 职场文书
哈理工毕业生的求职信
2013/12/22 职场文书
三好学生个人先进事迹材料
2014/05/17 职场文书
八荣八耻的活动方案
2014/08/16 职场文书
党员十八大心得体会
2014/09/12 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
反四风问题学习心得体会
2016/01/22 职场文书