在讀取.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>