LayUI导入excel功能

第一种导入

<div class="layui-form-block"><input type="file" class="layui-btn layui-btn-primary" id="LAY-excel-import-excel" multiple="multiple">
</div>

$(function () {// 监听上传文件的事件$('#LAY-excel-import-excel').change(function (e) {// 注意：这里直接引用 e.target.files 会导致 FileList 对象在读取之前变化，导致无法弹出文件var files = Object.values(e.target.files)uploadExcel(files)// 变更完清空，否则选择同一个文件不触发此事件e.target.value = ''})})
})

第二种导入

<button type="button" class="layui-btn" id="LAY-excel-upload">
<i class="layui-icon"></i>导入
</button><input class="layui-upload-file" type="file" accept="undefined" name="file">

//upload上传实例var uploadInst = upload.render({elem: '#LAY-excel-upload' //绑定元素, url: '/upload/' //上传接口（PS:这里不用传递整个 excel）, auto: false //选择文件后不自动上传, accept: 'file', choose: function (obj) {// 选择文件回调var files = obj.pushFile()var fileArr = Object.values(files)// 注意这里的数据需要是数组，所以需要转换一下// 用完就清理掉，避免多次选中相同文件时出现问题for (var index in files) {if (files.hasOwnProperty(index)) {delete files[index]}}$('#LAY-excel-upload').next().val('');uploadExcel(fileArr) // 如果只需要最新选择的文件，可以这样写： uploadExcel([files.pop()])}});

/*** 上传excel的处理函数，传入文件对象数组*/
function uploadExcel(files) {layui.use(['excel', 'layer'], function () {var excel = layui.excelvar layer = layui.layertry {excel.importExcel(files, {// 读取数据的同时梳理数据fields: {'id': 'A', 'username': 'B', 'experience': 'C', 'sex': 'D', 'score': 'E', 'city': 'F', 'classify': 'G', 'wealth': 'H', 'sign': 'I'}}, function (data) {// 还可以再进行数据梳理})} catch (e) {layer.alert(e.message)}})
}

参考案例http://excel.wj2015.com/
参考文档http://excel.wj2015.com/_book/

LayUI导入excel功能相关推荐

C#语言-NPOI.dll导入Excel功能的实现
前言:刚工作那会,公司有一套完善的MVC框架体系,每当有导入EXCEL功能要实现的时候,都会借用框架里自带的导入方法,一般三下五除二就完成了,快是快,可总是稀里糊涂的,心里很没有底.前几天,在另一个原 ...
Fastadmin 自带的导入Excel功能
Fastadmin 自带的导入Excel功能导入功能默认是禁用的,如需启用需做以下操作: 1.在你的模块控制器下添加import方法 public function import(){ r ...
解决如何使用layui导入Excel表数据
解决如何使用layui导入Excel表数据 1.前端页面html代码展示 <button type="button" lay-submit="" clas ...
layui导出Excel功能的两种方式的尝试
第一种方式利用layui自带的导出功能:在layui文档中有例子和代码网址:https://www.layui.com/demo/table/parseData.html 只需要在前端界面加入to ...
Vue实现导入Excel功能
1.前端主导实现步骤第一步,点击页面上的导入按钮,读入Excel文件利用插件完成. 第二步,按照后端的要求对数据格式加工,转成他们需要的格式需要自己写逻辑. 第三步,通过后端接口,将数据通过aj ...
在若依项目中添加导入excel功能
无论是电子商务网站,还是办公网站,都免不了要把一些excel导入到数据库中的功能,若依已经为此需求提供了很不错的封装与扩展. 前提: 首先,你需要建一张表,来存储你要导入的数据.本例中表名及实例名为: ...
若依项目中添加导入excel功能
controller层 //參考地址:https://blog.csdn.net/weixin_45853881/article/details/109782444 /*** 导入*/ @Requir ...
vue中实现Excel导入导出功能
导入Excel功能前置条件: 依赖包xlsx npm install xlsx -S 这里提供一个现成的在vue中导入Excel的功能(原作者-花裤衩),代码在最下面,可直接复制. 创建一个文件夹, ...
原版Excel导入数据功能改造
原版Excel导入功能梳理原版Excel导入功能主要是为了用于SaaS系统的各种模块的Excel导入通用化功能的实现,界面是统一的,如下图所示: 在导入对话框中,有以下功能: 1.模板上传功能:可以 ...

LayUI导入excel功能

LayUI导入excel功能相关推荐

最新文章

热门文章