基于BootStrap的initupload()实现Excel上传和获取excel中的数据

//html代码
 <div class="btn-group">
 ???<button class="btn sbold green" id="" onclick="initUpload(‘excelFile‘,‘/vraxx/rightAxx/upload‘);">
　　　　<span class="ladda-label">导入权益</span>
 ???</button>
 </div>

<div class="modal-body">
 ???<div class="row">
 ???????<div class="form-group">
 ???????????<div id="res_tree">
 ???????????????<input id="excelFile" name="excelFile" type="file" multiple="multiple" accept=".xls,.xlsx"/>
 ???????????</div>
 ???????</div>
 ???</div>
</div>

//js代码
function initUpload(ctrlName, uploadUrl) {
 ???var control = $(‘#‘ + ctrlName);
　　 //延时可以去掉的，不影响
 ???clickTimer = window.setTimeout(function(){
 ???control.fileinput({
 ???????language: ‘zh‘, //设置语言
 ???????uploadUrl: rootPath+uploadUrl, //上传的地址
 ???????uploadAsync: false, //默认异步上传
 ???????showCaption: true,//是否显示标题
 ???????showUpload: true, //是否显示上传按钮
 ???????browseClass: "btn btn-primary", //按钮样式
 ???????allowedFileExtensions: ["xls", "xlsx"], //接收的文件后缀
 ???????maxFileCount: 0,//最大上传文件数限制
 ???????previewFileIcon: ‘<i class="glyphicon glyphicon-file"></i>‘,
 ???????showPreview: true, //是否显示预览
 ???????previewFileIconSettings: {
 ???????????‘docx‘: ‘<i ass="fa fa-file-word-o text-primary"></i>‘,
 ???????????‘xlsx‘: ‘<i class="fa fa-file-excel-o text-success"></i>‘,
 ???????????‘xls‘: ‘<i class="fa fa-file-excel-o text-success"></i>‘,
 ???????????‘pptx‘: ‘<i class="fa fa-file-powerpoint-o text-danger"></i>‘,
 ???????????‘jpg‘: ‘<i class="fa fa-file-photo-o text-warning"></i>‘,
 ???????????‘pdf‘: ‘<i class="fa fa-file-archive-o text-muted"></i>‘,
 ???????????‘zip‘: ‘<i class="fa fa-file-archive-o text-muted"></i>‘,
 ???????},
　　　　　//黄色部分是业务代码，可以删去 
　　　　 ?//蓝色部分是和excel文件相关的固定写法
　　　　 ?//div_startimport是插件里的某个元素
 ???????uploadExtraData: function () {
 ???????????var rightCode=$("#rightCode").val();
 ???????????if(rightCode == null){
 ???????????????layer.alert("请选取XX号进行上传")
 ???????????????var oTable = new TableInit();
 ???????????????oTable.Init(data);
 ???????????????$("#div_startimport").show();
 ???????????}else {
 ???????????????var extraValue = "test";
 ???????????????return {"excelType": extraValue};
 ???????????}
 ???????}
 ???});
　　　　　//后边两句也可以去掉，我自己的一个弹出样式
 ???????$(‘#res_tree‘).jstree("deselect_all",true);
 ???????$(‘#responsive_1‘).modal();
 ???}, 300);

} 

$("#excelFile").on("filebatchuploadsuccess", function (event, data, previewId, index) {
　　 //样式可删去
 ???$("#responsive_1").modal(‘hide‘);
　　 //业务代码可删除
 ???var rightCode=$("#rightCode").val();
　　 //很关键 获取excel里的数据转为json
 ???var obj=JSON.stringify(data.response);
　　 //后边是通过html动态加载，把数据传到后台
　　 //换成一般的ajax也是可以的，灵活一点
 ???var html = $("#topli").html();
 ???var tb = $("#loadhtml");
 ???var searchServPath = "/vraxx/rightAxx/toexcel";
 ???tb.html(CommnUtil.loadingImg());
 ???tb.load(rootPath + searchServPath,{excelJson:obj,rightCode:rightCode}, function () {
 ???????/** 动态构建内容页面的 path 连接 */
 ???????html += ‘<li data-path="‘ + searchServPath + ‘"><i class="fa fa-circle"></i><a href="javascript:void(0)">XX导入</a></li>‘;
 ???????$("#topli").html(html);
 ???});
}); 

//后台java代码
@RequestMapping(value = "/upload", method = RequestMethod.POST)
@ResponseBody
private List<List<String>> importExcel(@RequestParam(value = "excelFile", required = false) MultipartFile[] file, HttpServletRequest request) {
 ???ModelMap map=new ModelMap();
 ???List<List<String>> list =new ArrayList<>();
 ???try {
 ???????MultipartRequest multipartRequest=(MultipartRequest) request;
 ???????List<MultipartFile> files = ((MultipartHttpServletRequest) request)
 ???????????????.getFiles("excelFile");
 ???????for (MultipartFile mufile :files){
 ???????????List<List<String>> datas = ExcelUtil.readXlsx(mufile.getInputStream(),mufile.getOriginalFilename());
 ???????????list.addAll(datas);
 ???????}
 ???} catch (Exception e) {
 ???????e.printStackTrace();
 ???????logger.error("导入失败");
 ???}
 ???return list;
}


@RequestMapping("/toexcel")
public String toexcel(String excelJson,String rightCode,ModelMap map) throws Exception{
　　 List<List<String>> listString= JSONArray.fromObject(excelJson); 
　　 List<VraxxTemporary> rightList = new ArrayList<>();
　　 /**
　　　* 对listString增强for循环取数据放到rightList的那坨代码就不贴了
　　　*/
　　 map.addAttribute("rightList", rightList);
　　 return VIEW_PATH+"/detail";//跳转到数据展示页
}