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

2024-09-26 19:25:11

使用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);
 	    	}
	   }
	});
}

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

layui 实现表单和文件上传一起传到后台的例子

HTML代码 <form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">尾灯名称</label> <div class="layui-input-block"> <input type="text" name="na
layui实现文件或图片上传记录

本文为大家分享了layui实现文件或图片上传记录的具体代码,供大家参考,具体内容如下首先是layui自己的官网关于图片/文件上传的帮助文档: 接下来是我自己的使用记录: 1.首先在js中定义一个全局变量 var uploadListIns; 2.进行赋值 //多文件列表示例 /** * 图片上传 */ layui.use('upload', function(){ var $ = layui.jquery,upload = layui.upload; var demoListView = $(
SpringBoot+layui实现文件上传功能

什么是spring boot Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置.用我的话来理解,就是spring boot其实不是什么新的框架,它默认配置了很多框架的使用方式,就像maven整合了所有的jar包,spring boot整合了所有的框架(不知道这样比喻是否合适). 页面代码(只需要引入基础layui的css与js) <fieldset c
layui文件上传实现代码

本文实例为大家分享了layui文件上传的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文件上传</title> <link rel="stylesheet" href="layui/css/layui.css"> <link rel="st
基于layui数据表格以及传数据的方式

如下所示: 数据表格一: <div style="margin:0px; background-color: white; margin:0 10px;"> <blockquote class="layui-elem-quote"> <div class="layui-btn-group demoTable"> <button class="layui-btn" data-type=&
layui 上传文件_批量导入数据UI的方法

使用layui的文件上传组件,可以方便的弹出文件上传界面. 效果如下: 点击[批量导入]按钮调用js脚本importData(config)就可以实现数据上传到服务器. 脚本: /*** * 批量导入 * config.downUrl 下载模板url * config.uploadUrl 上传文件url * config.msg * config.done 上传结束后执行. */ function importData(config){ var default_config = { msg:"数
解决layui上传文件提示上传异常,实际文件已经上传成功的问题

layui上传文件提示上传异常,实际文件已经上传成功原因:上传回调的方法接收的参数应该是json格式的,之前返回的是String,所以一直走异常的方法 @ResponseBody @RequestMapping("/web/upload") public JSONObject uploadSourceData(@RequestParam(value="file") MultipartFile file ){ String filePath = "&quo
上传文件返回的json数据会被提示下载问题解决方案

最近项目中出现上传文件返回的json数据会被提示下载,只有在ie10+中才会出现这个问题.前端使用jQuery的插件ajaxForm提交表单,后台返回的数据格式为json.代码如下: 后端Python: 复制代码代码如下: def jsonp(func): """Wraps JSONified output for JSONP requests.""" @wraps(func) def decorated_functio
使用Jupyter notebooks上传文件夹或大量数据到服务器

我们都知道如何上传单个文件,但如果有大量文件或大量数据,这就扎心了,可能会变得单调.因此目前想到一种办法,将文件压缩成zip包,然后再解压到工作目录解压缩文件 import zipfile import os files = zipfile.ZipFile('homework.zip', 'r') files.extractall(os.getcwd()) files.close() 打包成zip 但是,有时可能还需要从笔记本中下载多个文件.有几种方法可以做到这一点,但最简单的方法是压缩目录并
swagger上传文件并支持jwt认证的实现方法

什么是 Swagger? Swagger的目标是为REST APIs 定义一个标准的,与语言无关的接口,使人和计算机在看不到源码或者看不到文档或者不能通过网络流量检测的情况下能发现和理解各种服务的功能.当服务通过Swagger定义,消费者就能与远程的服务互动通过少量的实现逻辑.类似于低级编程接口,Swagger去掉了调用服务时的很多猜测. 背景由于swagger不仅提供了自动实现接口文档的说明而且支持页面调试,告别postman等工具,无需开发人员手动写api文档,缩减开发成本得到大家广泛认可
eWebEditor 上传文件提示格式不正确的解决方法

原来是在系统上出了问题.是2003的IIS出现了问题,因为是2003的系统,它对ASP的上传文件做出了200K的限制,解决问题方法如下 : 先打开:Internet 信息服务(IIS)管理器 (本地计算机 )---- 属性 ----允许直接编辑配置数据库(N) 一定要勾先"允许直接编辑配置数据库(N)" 然后在服务里关闭iis admin service服务找到windows\system32\inetsrv下的metabase.xml, 用计事本打开metabase.xml,找
用批处理上传文件到ftp目录下的实现方法

为了快速将项目中开发的补丁程序通过ftp快速上传到linux下,感觉每次用flashFxp等工具麻烦),写了个简单的批处理,与大家分享一下. 将以下代码保存为.bat格式的文件,每次将要上传的补丁保存在规定的本地目录中,只要双击执行此文件就能上传到你的指定目录上. 说明: 192.168.1.1 ftp ip 地址 21 端口 username 用户名 password 密码 temp.txt 保存ftp信息的临时文件,上传后删除 C:\Documents and Settings\user\桌
php上传文件并存储到mysql数据库的方法

本文实例讲述了php上传文件并存储到mysql数据库的方法.分享给大家供大家参考.具体分析如下: 下面的代码分别用于创建mysql表和上传文件保存到mysql数据库创建mysql表: <?php $con = mysql_connect("localhost", "", ""); mysql_select_db("w3m"); $sql = "CREATE TABLE updfiles (" . &
PHP上传文件及图片到七牛的方法

上传文件到七牛最简单的方式就是使用七牛官方最新的SDK 安装PHP SDK composer require qiniu/php-sdk 上传文件到七牛 use Qiniu\Auth; use Qiniu\Storage\UploadManager; $cfg = [ 'access' => 'YOUR_ACCESS_KEY', 'secret' => 'YOUR_SECRET_KEY', 'bucket' => 'YOUR_BUCKET', 'domain' => 'https:
jQuery利用FormData上传文件实现批量上传

在项目中涉及题库的批量上传功能,在此利用formdata进行文件上传,后台读取,进行批量插入.同时还需要带入teacherId和courseId两个参数,所以将文件和两个参数append到formdata中,传到后台. JQuery 函数的提交按钮执行的函数如下: <script type="text/javascript"> //批量上传题库 function fileSubmit() { var questionFile = new FormData(); var fi

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

相关推荐

随机推荐