热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

今天小编就为大家分享一篇layui上传文件_批量导入数据UI的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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

效果如下:

点击【批量导入】按钮调用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= '
'; htmlContent += ''; htmlContent += '

点击上传,或将文件拖拽到此处

'; htmlContent += '
'; 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.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的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。


推荐阅读
  • 实现Win10与Linux服务器的SSH无密码登录
    本文介绍了如何在Windows 10环境下使用Git工具,通过配置SSH密钥对,实现与Linux服务器的无密码登录。主要步骤包括生成本地公钥、上传至服务器以及配置服务器端的信任关系。 ... [详细]
  • 笔记说明重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系& ... [详细]
  • egg实现登录鉴权(七):权限管理
    权限管理包含三部分:访问页面的权限,操作功能的权限和获取数据权限。页面权限:登录用户所属角色的可访问页面的权限功能权限:登录用户所属角色的可访问页面的操作权限数据权限:登录用户所属 ... [详细]
  • 本文介绍了用户界面(User Interface, UI)的基本概念,以及在iOS应用程序中UIView及其子类的重要性和使用方式。文章详细探讨了UIView如何作为用户交互的核心组件,以及它与其他UI控件和业务逻辑的关系。 ... [详细]
  • 本文由chszs撰写,详细介绍了Apache Mina框架的核心开发流程及自定义协议处理方法。文章涵盖从创建IoService实例到协议编解码的具体步骤,适合希望深入了解Mina框架应用的开发者。 ... [详细]
  • Canopy环境安装与使用指南
    《利用Python进行数据分析》一书推荐使用EPDFree版本的环境,然而随着技术的发展,目前更多人倾向于使用Canopy。本文将详细介绍Canopy的安装及使用方法。 ... [详细]
  • 本报告记录了嵌入式软件设计课程中的第二次实验,主要探讨了使用KEIL V5开发环境和ST固件库进行GPIO控制及按键响应编程的方法。通过实际操作,加深了对嵌入式系统硬件接口编程的理解。 ... [详细]
  • LeetCode 102 - 二叉树层次遍历详解
    本文详细解析了LeetCode第102题——二叉树的层次遍历问题,提供了C++语言的实现代码,并对算法的核心思想和具体步骤进行了深入讲解。 ... [详细]
  • 本文提供了一个详尽的前端开发资源列表,涵盖了从基础入门到高级应用的各个方面,包括HTML5、CSS3、JavaScript框架及库、移动开发、API接口、工具与插件等。 ... [详细]
  • JavaScript 中引号的多层嵌套使用技巧
    本文详细介绍了在 JavaScript 编程中如何处理引号的多级嵌套问题,包括双引号、单引号以及转义字符的正确使用方法。 ... [详细]
  • 解决UIScrollView自动偏移问题的方法
    本文介绍了一种有效的方法来解决在使用UIScrollView时出现的自动向下偏移的问题,通过调整特定的属性设置,可以确保滚动视图正常显示。 ... [详细]
  • 如何高效渲染JSON数据
    本文介绍了在控制器中返回JSON结果的方法,并详细说明了如何利用jQuery处理和展示这些数据,为Web开发提供了实用的技巧。 ... [详细]
  • Awk是一款功能强大的文本分析与处理工具,尤其在数据解析和报告生成方面表现突出。它通过读取由换行符分隔的记录,并按照指定的字段分隔符来划分和处理这些记录,从而实现复杂的数据操作。 ... [详细]
  • 深入解析Unity3D游戏开发中的音频播放技术
    在游戏开发中,音频播放是提升玩家沉浸感的关键因素之一。本文将探讨如何在Unity3D中高效地管理和播放不同类型的游戏音频,包括背景音乐和效果音效,并介绍实现这些功能的具体步骤。 ... [详细]
  • 本文探讨了一种常见的C++面试题目——实现自己的String类。通过此过程,不仅能够检验开发者对C++基础知识的掌握程度,还能加深对其高级特性的理解。文章详细介绍了如何实现基本的功能,如构造函数、析构函数、拷贝构造函数及赋值运算符重载等。 ... [详细]
author-avatar
广东庚舞飞扬
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有