layui 上传文件_批量导入数据UI的方法
作者:xiaozaq 发布时间:2024-05-22 10:36:41
标签: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 = '<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);
}
}
});
}
来源:https://blog.csdn.net/xiaozaq/article/details/83111880
0
投稿
猜你喜欢
- 1.Anaconda 安装python3.6conda create -n match python=3.6Python版本默认安装是 3.
- 本文实例讲述了python字典基本操作。分享给大家供大家参考。具体如下:d2 = {'spam': 2, 'ham&
- Java 8终于到来了! 经过几年的等待, java程序员终于能在java中得到函数式编程的支持了. 函数式编程的支持能流程化现
- 本文为大家分享了Python遗传算法解决最大流问题,供大家参考,具体内容如下Generate_matrixdef Generate_matr
- 一、什么是 Postman(前世今生)Postman 诞生于 2013 年,一开始只是 Abhinav Asthana 着手于解决 API
- 安装包 PyCharm笔者使用PyCharm2018.3.2,请根据机器是64位还是32位来选择对应的PyCharm版本。(相信绝大部分人都
- 使用爬虫时,大部分网站都有一定的反爬措施,有些网站会限制每个 IP 的访问速度或访问次数,超出了它的限制你的 IP 就会被封掉。对于访问速度
- 一、问题由来工作的局域网中,会接入很多设备,机器人上的网络设备就2个了,一个巨哥红外,一个海康可见光。机器人还有自身的ip。有时候机器人挂的
- 先看看单条 SQL 语句的分页 SQL 吧。 方法1: 适用于 SQL Server 2000/2005 SELECT TOP 页大小 *
- 示例很简单,注释里也都做了说明,这里就不多废话了。<?php/*从平台获取数据库名*/$dbname = "";/
- pytorch自定义不可导激活函数今天自定义不可导函数的时候遇到了一个大坑。首先我需要自定义一个函数:sign_fimport torchf
- 本文实例讲述了Python实现从订阅源下载图片的方法。分享给大家供大家参考。具体如下:这段代码是基于python 3.4实现的,和pytho
- 一、字符串方法1.字符串的分割s.split() 默认是按照空格分割s.split(',') 按照逗号分割(返回的是一个列表
- 通过在File->setting->File and Code Templates设置模板代码,这样就可以在新建python文件
- 本文实例讲述了Python下载指定页面上图片的方法。分享给大家供大家参考,具体如下:#!/usr/bin/python #coding:ut
- 当1980年Three Rivers公司第一次推出图形用户界面Perq,产生GUI这个概念的时候,不知道他们有没有想过今天图形界面设计竟然会
- 本文实例讲述了微信公众平台实现获取用户OpenID的方法。分享给大家供大家参考。具体分析如下:用户点击微信自定义菜单view类型按钮后,微信
- 四年前写的一个内容管理系统,应用在公司内部网上,昨天DBA说其中的SQL语句未使用参数化的调用,导致服务器负担加重,资源占用大。并列出了几个
- 本文实例讲述了python实现对象列表根据某个属性排序的方法。分享给大家供大家参考,具体如下:对于一个已有的python list, 里面的
- 导读我们在使用selenium打开google浏览器的时候,默认打开的是一个新的浏览器窗口,而且里面不带有任何的浏览器缓存信息。当我们想要爬