springboot+bootstrap fileupinput 插件实现文件上传

插件引入

html页面

    

        

            

                
                
EXCEL导入
            
            

                

                    
                        
                        用户信息-模板.xls
                    
                
                

                

                    

                        
                        
                    
                
                

                

                
            
            

                关闭
            
        
    

js

function InitExcelFile(service) {

    $("#excelFile").fileinput({
        uploadUrl: "/FileUpload/upload",//上传的地址
        uploadAsync: true,              //异步上传
        language: "zh",                 //设置语言
        showCaption: true,              //是否显示标题
        showUpload: true,               //是否显示上传按钮
        showRemove: true,               //是否显示移除按钮
        showPreview : true,             //是否显示预览按钮
        browseClass: "btn btn-primary", //按钮样式
        uploadLabel: "上传",           //设置上传按钮的汉字
        enctype: 'multipart/form-data',
        dropZoneEnabled: true,         //是否显示拖拽区域
        allowedFileExtensions: ["xls", "xlsx"], //接收的文件后缀
        maxFileCount: 1,                        //最大上传文件数限制
        previewFileIcon: '',
        allowedPreviewTypes: null,
        previewFileIconSettings: {
            'xls': '',
            'xlsx': ''
        },
        uploadExtraData: {
            service: service
        }
    }).on("fileuploaded", function(event, data) {
        var response=data.response;
        var html;
        if (response.code =='501') {
            html = "
内容：  " + response.desp + "详情下载。
"
        }else{
            html = "
内容：  " + response.desp + ">
"
        }
        $(html).appendTo($('#response'));
    }).on('fileerror', function(event, data, msg) {  //一个文件上传失败
        alert('文件上传失败！'+msg);
    });
}

java后台

 @RequestMapping(value = "/upload", method = RequestMethod.POST)
    @ResponseBody
    public JSONObject uploadFile(@RequestParam(value = "file", required = false) MultipartFile file,String service) throws Exception {
        //TODO dosomething
        JSONObject result=new JSONObject();
        String filetype=file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".")+1);
        result= userService.uploadUser(file.getBytes(),filetype,service);
        return result;
    }

效果