JQuery Ajax 導入 Excel 通??梢允褂脙煞N方式,分別是:
1.使用 FileReader API 解析 Excel
function handleFileSelect(files) { var file = files[0]; var reader = new FileReader(); var name = file.name; reader.onload = function(e) { var data = e.target.result; var workbook = XLSX.read(data, {type: 'binary'}); var sheetName = workbook.SheetNames[0]; var worksheet = workbook.Sheets[sheetName]; var header = getHeaderRow(worksheet); var rows = XLSX.utils.sheet_to_json(worksheet); var response = { header: header, rows: rows }; $.ajax({ url: 'your_url_here', type: 'POST', data: JSON.stringify(response), contentType: 'application/json; charset=utf-8', success: function() { alert('Excel 導入成功!'); }, error: function() { alert('Excel 導入失敗!'); } }); }; reader.readAsBinaryString(file); }
2.后端解析 Excel 文件,前端使用 Ajax 傳輸文件
前端代碼:
$('form').submit(function(e) { e.preventDefault(); var formData = new FormData($(this)[0]); $.ajax({ url: 'your_url_here', type: 'POST', data: formData, async: false, cache: false, contentType: false, processData: false, success: function() { alert('Excel 導入成功!'); }, error: function() { alert('Excel 導入失敗!'); } }); return false; });
后端代碼(以 PHP 為例):
$file = $_FILES['file']['tmp_name']; $data = new Spreadsheet_Excel_Reader(); $data->setOutputEncoding('UTF-8'); $data->read($file); $header = $data->sheets[0]['cells'][1]; for ($i = 2; $i<= $data->sheets[0]['numRows']; $i++) { $row = $data->sheets[0]['cells'][$i]; // 對每一行進行處理,可以保存到數據庫中 }
以上就是使用 JQuery Ajax 導入 Excel 的兩種方式,根據實際情況選擇對應的方式即可。