1.引入js
xlsx.full.min.js
链接: https://pan.baidu.com/s/1ZZIIf_i6dy8wIwumMQKFHA
提取码: bmv7
2.html代码
<button class="btn btn-primary btn-blue" onclick="selectFile();">上 传</button>
<input type="file" id="file" style="filter:alpha(opacity=0);opacity:0;width: 0;height: 0;"/>
3.js代码
/**
* 导入
*/
function selectFile(){
//触发 文件选择的click事件
$("#file").trigger("click");
}
$('#file').change(function(e) {
$("#myDiv").show();
var files = e.target.files;
var fileReader = new FileReader();
fileReader.onload = function(ev) {
try {
var data = ev.target.result,
workbook = XLSX.read(data, {
type: 'binary'
}), // 以二进制流方式读取得到整份excel表格对象
persons = []; // 存储获取到的数据
} catch (e) {
console.log('文件类型不正确');
return;
}
// 表格的表格范围,可用于判断表头是否数量是否正确
var fromTo = '';
// 遍历每张表读取
for (var sheet in workbook.Sheets) {
if (workbook.Sheets.hasOwnProperty(sheet)) {
fromTo = workbook.Sheets[sheet]['!ref'];
persons = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
break; // 如果只取第一张表,就取消注释这行
}
}
var str="";
for(var i=0;i<persons.length;i++){
if(i==persons.length-1){
str+=JSON.stringify(persons[i]);
}else{
str+=JSON.stringify(persons[i])+"*"
}
}
$.ajax({
url:"${appPath}/eco/using/fusi0010_importData.st",
data:{"persons":str},
dataType:"json",
type:"post",
success:function(data){
var 错误数据集合=data.errorDataList;
var 错误条数=错误数据集合.length;
var 成功条数=data.successData;
var 总条数=data.totalData;
var 重复条数=data.duplicateData;
var str='';
str+='<tr style="height:30px;line-height:30px; border-bottom-color: #fff;" >'
+'<td colspan="4" style="border-bottom-color: #fff !important;border-top-color: #fff !important;" class="td">数据上传情况:</td>'
+'</tr>'
+'<tr style="height:30px;line-height:30px;">'
+'<td colspan="4" class="td">'
+' '
+'共导入 <span class="span">'+总条数+'</span> 条数据,上传成功 <span class="span">'+成功条数+'</span> 条, <span class="span">'+重复条数+'</span> 条重复数据, <span class="span">'+错误条数+'</span> 条导入错误数据,以下展示错误数据详情:'
+'</td>'
+'</tr>';
if(错误条数==0){
str+='<tr style="font-weight:bold;height:30px;"><td style="width:20%;text-align: center;" class="td">序号</td><td style="width:20%;text-align: center;" class="td">汇总月份</td><td style="width:20%;text-align: center;" class="td">企业名称</td><td style="width:20%;text-align: center;" class="td">导入错误描述</td></tr>'
+'<tr style="height:30px;line-height:30px;text-align: center; color: red;"><td colspan="4" class="td">无错误数据!</td></tr>'
}
if(错误数据集合.length>0){
str+='<tr style="font-weight:bold;height:30px;"><td style="width:20%;text-align: center;" class="td">序号</td><td style="width:20%;text-align: center;" class="td">汇总月份</td><td style="width:20%;text-align: center;" class="td">企业名称</td><td style="width:20%;text-align: center;" class="td">导入错误描述</td></tr>';
for(var i=0;i<错误数据集合.length;i++){
str+='<tr style="height:30px;"><td style="width:20%;text-align: center;" class="td">'+错误数据集合[i].序号+'</td><td style="width:20%;text-align: center;" class="td">'+错误数据集合[i].汇总月份+'</td><td style="width:20%;text-align: center;" class="td">'+错误数据集合[i].企业名称+'</td><td style="width:20%;text-align: center;" class="td">'+错误数据集合[i].导入错误描述+'</td></tr>';
}
}
$("#mytbody").html(str)
$("#myDiv").hide();
}
});
};
// 以二进制方式打开文件
fileReader.readAsBinaryString(files[0]);
//获取文件名称展示在页面上
var fliePath=$("#file").val();
var arr=fliePath.lastIndexOf("\\");
fliePath=fliePath.substring(arr+1,fliePath.length);
$("#fileName").text(fliePath);
});