在读取.xlsx文件的时候,需要引入xlsx.core.min.js;
<script type="text/javascript" src="./xlsx.core.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="uploadFile border_bg">
<form action="" method="post" id="formToUpdate">
<div class="form-group">
<label ><strong>Import from csv</strong></label>
<input type="file" name="uploadCSV" id="upCsv">
<input id="ajaxSubmit" type="button" value="upload CSV" class="btn">
</div>
</form>
</div>
</body>
<script type="text/javascript" src="./jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./xlsx.core.min.js"></script>
<script>
$("#ajaxSubmit").click(function(e) {
var sum = 0;
var fileType = $('#upCsv').val().split('.');
var files = document.getElementById("upCsv").files;
var name = files[0] ? files[0].name : '';
$("#ajaxSubmit").attr("disabled","disabled");
// 判断上传的文件类型
if((fileType[fileType.length-1]) === 'csv' || (fileType[fileType.length-1]) === 'CSV'){
var data = [];
var files = document.getElementById("upCsv").files;
if(files.length) {
var file = files[0];
var reader = new FileReader(); //new一个FileReader实例
if(typeof FileReader == 'undefined') {
alert("你的浏览器暂不支持该功能", {title: "提示", skin: "layui-layer-molv"});
file.setAttribute("disabled", "disabled");
return;
}
reader.readAsText(file);
reader.onload = function() {
var num = null;
var relArr = this.result.split("\r\n");
if(!$.isEmptyObject(relArr) && relArr.length > 1) {
for(var key = 0; key < relArr.length; key++) {
var values = relArr[key];
if(!$.isEmptyObject(values)) {
var objArr = values.split(",");
data.push(objArr);
}
}
}
// 判断“应付返利金额”是表头的第几个
for(var key = 0; key < data[0].length; key++){
if(data[0][key]==="应付返利金额"){
num = key
}
}
// 这里做了一个读取表头为“应付返利金额”的数值的和
for(var key=1; key < data.length; key++){
sum += parseFloat(data[key][num])
}
myAjax((Math.round(sum*100))/100,name);
console.log((Math.round(sum*100))/100,name);
// 将算出来的和和文件名称传给后端
$("#ajaxSubmit").removeAttr("disabled");
}
}
}else if((fileType[fileType.length-1]) === 'xlsx' || (fileType[fileType.length-1]) === 'XLSX'){
var fileReader = new FileReader();
fileReader.onload = function(ev) {
try {
var data = ev.target.result,
workbook = XLSX.read(data, {
type: 'binary'
}), // 以二进制流方式读取得到整份excel表格对象
persons = []; // 存储获取到的数据
} catch (e) {
alert('文件类型不正确');
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; // 如果只取第一张表,就取消注释这行
}
}
// 这里做了一个读取表头为“应付返利金额”的数值的和
for(var key=0; key<persons.length; key++){
var onePrice = persons[key]["应付返利金额"]
sum += onePrice;
}
console.log((Math.round(sum*100))/100);
// 将算出来的和和文件名称传给后端
myAjax((Math.round(sum*100))/100,name);
$("#ajaxSubmit").removeAttr("disabled");
};
// 以二进制方式打开文件
fileReader.readAsBinaryString(files[0]);
}else{
alert("请上传.csv或.xlsx文件");
$("#ajaxSubmit").removeAttr("disabled");
}
// 给后端“应付返利金额”的数值的和,文件名的ajax
function myAjax(sum,name){
console.log(sum,name)
// $.ajax({
// type: "post",
// url: "路径",
// data: {
// sum,
// name
// },
// dataType: "json",
// success: function(data){
// console.log(data)
// }
// });
}
})
</script>
</html>