1. 前台代码
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>导入excel测试</title> <style> #fatherDiv{ width:100px; height:20px; border:1px solid green; } #sonDiv{ width:0px; height:20px; background:green; } </style> <script th:src="@{|/js/jquery-2.1.4.min.js/|}"></script> <script> $(function () { $("#importExcel").bind("click", function () { /* 判断是否有导入文件 */ if (!$("#excel").val()) { window.alert("请导入excel文件"); return; } /* 判断输入的文件的类型 */ var splitArray = $("#excel").val().toLowerCase().split("."); var type = splitArray[splitArray.length - 1]; if (type != "xls" && type != "xlsx") { window.alert("导入的文件类型有误"); return; } // 获取excel对象 var excel = $("#excel")[0].files[0]; /* 判断输入的excel文件的大小 */ var excelSize = excel.size; if (excelSize > 1024 * 1024 * 10) { window.alert("当前上传的excel文件的大小为" + Math.round(excelSize / 1024 / 1024 * 100) / 100 + "M,超过10M"); return; } var formData = new FormData(); formData.append("file", excel); // ajax异步文件上传 $.ajax({ type: "post", url: "/importExcel", data: formData, contentType: false, // 不再采用普通的form表单元素提交方式。(multipart/form-data) processData: false, // 提交文件，不是提交普通的字符串。 xhr: function () { // 显示上传进度条 myXhr = $.ajaxSettings.xhr(); if (myXhr.upload) { myXhr.upload.addEventListener('progress', function (e) { var loaded = e.loaded;//已经上传大小情况 var tot = e.total;//附件总大小 var per = Math.floor(100 * loaded / tot); //已经上传的百分比 $("#sonDiv").html(per + "%"); $("#sonDiv").css("width", per + "%"); $("#schedule").html(per + "%"); console.log('附件总大小 = ' + loaded); console.log('已经上传大小 = ' + tot); }, false); } return myXhr; }, success: function (json) { if (json.result) { alert("导入成功") } else { alert(json.errorMessage); } } }); }) }) </script> </head> <body> 请选择你要导入的excel文件(.xls;.xlsx)<br/> <input type="file" id="excel"/> //进度条框 <div id="fatherDiv"> <div id="sonDiv"></div> </div><br/>
//上传了多少百分比 <span id="schedule">0%</span> <button id="importExcel">导入</button> </body> </html>
2. 后台spring代码
package com.bjpowernode.excel.importExcel.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.multipart.MultipartFile; import java.util.HashMap; import java.util.Map; /** * ClassName:ImportExcel * Package:com.bjpowernode.excel.importExcel.controller * Description: * * @Date:2019/2/25 21:46 * @Author: 郑军 */ @Controller public class ImportExcel { @RequestMapping("/") public String toIndex() { return "index"; } @RequestMapping("/importExcel") @ResponseBody public Map<String, Object> importExcel(@RequestParam("file") MultipartFile file) { Map<String, Object> map = new HashMap<>(); String originalFilename = file.getOriginalFilename(); String fileType = originalFilename.substring(originalFilename.lastIndexOf(".")); if (!".xls".equals(fileType) && !".xlsx".equals(fileType)) { map.put("result", false); map.put("errorMessage", "导入的文件类型有误"); return map; } // 导入的excel数据相关的业务逻辑校验，暂时省略。 map.put("result", true); map.put("errorMessage", ""); return map; } }