基于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)
@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";//跳转到数据展示页
}

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