Layui⽂件上传（Excel转表格）经过两天的摸索，始终没有到合适⽅法，解决上传的问题，最后在⼤佬的指导下完成（⾮常感谢）
⾸先下载官⽅扩展插件，在layui-excel/layui_exts/⾥⾯的excel.js和excel.min.js两个⽂件网页设计与制作基础
fly.layui/extend/excel/
其次在HTML界⾯引⼊js⽂件，layui_exts⽂件夹在webapp直接⽬录下
<script type="text/javascript">
jquery下载文件插件fig({
base: '/layui_exts/'
}).extend({
excel: 'excel'
});
</script>
按钮代码
<button class="layui-btn layui-btn-sm" id="importExcel">
<i class="layui-icon"> </i>上传⽂件
</button>
然后进⾏上传操作
<script>
layui.use(['table','jquery','layer','upload','excel'],function () {
var table = layui.table
, $ = layui.jquery
, layer = layui.layer
, upload = layui.upload
, excel = l
;
//upload上传实例
var uploadInst = der({
elem: '#importExcel' //绑定元素
, url: '/upload/' //上传接⼝（PS：这⾥不⽤传递整个 excel）
, auto: false//选择⽂件后不⾃动上传
, accept: 'file'
,
choose: function (obj) {// 选择⽂件回调
//console.debug(obj)
var files = obj.pushFile()
var fileArr = Object.values(files)// 注意这⾥的数据需要是数组，所以需要转换⼀下
//console.debug(fileArr)
// ⽤完就清理掉，避免多次选中相同⽂件时出现问题
for (var index in files) {
if (files.hasOwnProperty(index)) {
delete files[index]
}
}
uploadExcel(fileArr) // 如果只需要最新选择的⽂件，可以这样写： uploadExcel([files.pop()])
}
})
/**
* 上传excel的处理函数，传⼊⽂件对象数组
* @param  {[type]} files [description]
* @return {[type]}      [description]
*/
function uploadExcel(files) {
try {
excel.importExcel(files, {
/
/ 读取数据的同时梳理数据
fields: {
'vmNo': 'A'
,'vmAL': 'B'
,'vmName': 'C'
,'vmExp': 'D'
,'vmStartDate': 'E'
,'vmEndDate': 'F'
,'vmNum': 'G'
,'vmPer': 'H'
}
}, function (data) {
// console.debug(data);
$.each(data, function (index, obj) {
// console.debug(obj)
// console.debug(obj.Sheet1)
$.each(obj.Sheet1, function (index, object){
console.log(object);
var vmNo=object.vmNo;
var vmAL=object.vmAL;
var vmName=object.vmName;
var vmExp=object.vmExp;
var vmStartDate=object.vmStartDate;
var vmEndDate=object.vmEndDate;
var vmNum=object.vmNum;
var vmPer=object.vmPer;
console.log(object.vmEndDate);
if(vmNo=="编号"){browser怎么记忆
}else {
$.ajax({
// async: false,
url: 'addVM',//产品型号下拉框
type: 'post',
/
/ dataType: "json",
// contentType: "application/json",
data: {
vmNo: vmNo,
vmAL: vmAL,
vmName: vmName,
vmExp: vmExp,
vmStartDate: vmStartDate,
vmEndDate: vmEndDate,
vmNum: vmNum,
vmPer: vmPer
access数据库设计五个步骤
},
success: function (data) {
layer.msg('上传成功');
url:"findAllVM"
})
},
error: function (msg) {
layer.msg('请联系管理员');
}
});
}
})
});
// 如果不需要展⽰直接上传，可以再次 $.ajax() 将JSON数据通过 JSON.stringify() 处理后传递到后端即可
/*layer.open({
黄页是干什么用的
title: '⽂件转换结果'
, area: ['800px', '400px']
, offset: ['100px', '100px']
, tipsMore: true
, content: laytpl($('#LAY-excel-export-ans').html()).render({data: data, files: files})
, success: function () {
// der('tab')
code({})
}
})*/
})
} catch (e) {
layer.ssage)
}
}
});
</script>
如果需要先对数据进⾏检验，可以把弹出层的代码解开并加上相关的代码，如下
<script type="text/html" id="LAY-excel-export-ans">
{{# layui.each(d.data, function(file_index, item){ }}
<blockquote class="layui-elem-quote">{{d.files[file_index].name}}</blockquote>
<div class="layui-tab">
<ul class="layui-tab-title">
{{# layui.each(item, function(sheet_name, content) { }}
<li>{{sheet_name}}</li>
{{# }); }}
</ul>
<div class="layui-tab-content">
{{# layui.each(item, function(sheet_name, content) { }}
<div class="layui-tab-item">
<table class="layui-table">
{{# layui.each(content, function(row_index, value) { }}
{{# var col_index = 0 }}
<tr>
{{# layui.each(value, function(col_key, val) { }}
<td id="table-export-{{file_index}}-{{sheet_name}}-{{row_index}}-{{col_index++}}">{{val}}</td>                        {{# });}}
</tr>
{{# });}}
</table>
<pre class="layui-code">{{JSON.stringify(content, null, 2)}}</pre>
</div>
{{# }); }}
</div>
</div>
五种excel常用函数名称
{{# }) }}
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。