javaScript读取.csv文件或.xlsx文件
在读取.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>
每一次打开电脑,都会掉好多头发