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

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

阅读量：6679 次

发布时间：2019-06-25

本文共 3527 字，大约阅读时间需要 11 分钟。

简单说明：后边要做exl解析(还没做呢)，所以先有一个excel的的上传以及获取excel中的数据，展示出来。

代码：

//html代码

//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: '',         showPreview: true, //是否显示预览         previewFileIconSettings: {
               'docx': '',             'xlsx': '',             'xls': '',             'pptx': '',             'jpg': '',             'pdf': '',             'zip': '',         }, 　　　　　//黄色部分是业务代码，可以删去 　　　　  //蓝色部分是和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 += 'XX导入
';         $("#topli").html(html);     }); });

//后台java代码 @RequestMapping(value = "/upload", method = RequestMethod.POST) @ResponseBody private List
     
      
       > importExcel(@RequestParam(value = "excelFile", required = false) MultipartFile[] file, HttpServletRequest request) {
       ModelMap map=new ModelMap();     List
       
        
         > list =new ArrayList<>();     try {
           MultipartRequest multipartRequest=(MultipartRequest) request;         List
         
           files = ((MultipartHttpServletRequest) request)                 .getFiles("excelFile");         for (MultipartFile mufile :files){
               List
          
           
            > 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
            
             
              > listString= JSONArray.fromObject(excelJson);  　　 List
              
                rightList = new ArrayList<>(); 　　 /** 　　　* 对listString增强for循环取数据放到rightList的那坨代码就不贴了 　　　*/ 　　 map.addAttribute("rightList", rightList); 　　 return VIEW_PATH+"/detail";//跳转到数据展示页 }