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

简单说明：后边要做exl解析(还没做呢)，所以先有一个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)@ResponseBodyprivate 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";//跳转到数据展示页}

说明：网上有很多关于bootstrap  fileupload的使用介绍，但是很多都不太好使，我做这个试了好久才成功，拿出来分享给大家。

原文地址：https://www.cnblogs.com/xuchao0506/p/9999836.html