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 相关文章推荐
HTML DOM的nodeType值介绍
Mar 31 Javascript
js对象转json数组的简单实现案例
Feb 28 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
Oct 30 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
Jan 22 Javascript
基于原生JS实现图片裁剪
Aug 01 Javascript
JS在浏览器中解析Base64编码图像
Feb 09 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
React如何利用相对于根目录进行引用组件详解
Oct 09 Javascript
AngularJS中scope的绑定策略实例分析
Oct 30 Javascript
Nuxt.js 数据双向绑定的实现
Feb 17 Javascript
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
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+jQuery 注册模块的改进(三):更新到Smarty3.1
2014/10/14 PHP
php编写的一个E-mail验证类
2015/03/25 PHP
ThinkPHP的SAE开发相关注意事项详解
2016/10/09 PHP
CL vs ForZe BO5 第一场 2.13
2021/03/10 DOTA
javascript 一段左右两边随屏滚动的代码
2009/06/18 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
用jquery设置按钮的disabled属性的实现代码
2010/11/28 Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
2011/01/11 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
jQuery事件绑定用法详解
2016/09/08 Javascript
Angularjs的Controller间通信机制实例分析
2016/11/07 Javascript
DropDownList控件绑定数据源的三种方法
2016/12/24 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
详解微信小程序Page中data数据操作和函数调用
2017/09/27 Javascript
解决vue 按钮多次点击重复提交数据问题
2018/05/10 Javascript
JavaScript实现多态和继承的封装操作示例
2018/08/20 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
2019/09/04 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
2020/02/02 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
2021/01/07 Javascript
[42:32]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第二局
2016/02/27 DOTA
pyqt5利用pyqtDesigner实现登录界面
2019/03/28 Python
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
10 行Python 代码实现 AI 目标检测技术【推荐】
2019/06/14 Python
django框架model orM使用字典作为参数,保存数据的方法分析
2019/06/24 Python
3行Python代码实现图像照片抠图和换底色的方法
2019/10/10 Python
Python2.x与3​​.x版本有哪些区别
2020/07/09 Python
Solaris操作系统的线程机制
2012/12/23 面试题
趣味体育活动方案
2014/02/08 职场文书
2014年社区植树节活动方案
2014/02/28 职场文书
文艺晚会主持词
2014/03/24 职场文书
建筑工地文明标语
2014/10/09 职场文书
幼儿园感恩节活动方案2014
2014/10/11 职场文书
怎样写离婚协议书
2015/01/26 职场文书
中学教师个人总结
2015/02/10 职场文书
离婚撤诉申请书范本
2015/05/18 职场文书
SqlServer: 如何更改表的文件组?(进而改变存储位置)
2021/04/05 SQL Server