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

插件引入

<link href="/js/plugins/bootstrap-fileinput/css/fileinput.css" rel="stylesheet"/>

<script src="/js/plugins/bootstrap-fileinput/js/fileinput.js"></script><script src="/js/plugins/bootstrap-fileinput/js/locales/zh.js"></script>

html页面

<div id="import" class="modal fade bs-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">    <div class="modal-dialog modal-lg">        <div class="modal-content">            <div class="modal-header bg-primary">                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>                <h4 class="modal-title">EXCEL导入</h4>            </div>            <div class="modal-body">                <div style="text-align:right;padding:5px">                    <a id="excelModul" href="">                        <img alt="用户信息-模板" src="" />                        <span style="font-size:larger;font-weight:200;color:red">用户信息-模板.xls</span>                    </a>                </div>                <hr/>                <form id="ffImport" method="post">                    <div title="Excel导入操作" style="padding: 5px">                        <input type="hidden" id="AttachGUID" name="AttachGUID" />                        <input id="excelFile" name="file" type="file">                    </div>                </form>                <hr/>                <div id="response">                </div>            </div>            <div class="modal-footer">                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>            </div>        </div>    </div></div>

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: '<i class="glyphicon glyphicon-file"></i>',        allowedPreviewTypes: null,        previewFileIconSettings: {            'xls': '<i class="glyphicon glyphicon-file"></i>',            'xlsx': '<i class="glyphicon glyphicon-file"></i>'        },        uploadExtraData: {            service: service        }    }).on("fileuploaded", function(event, data) {        var response=data.response;        var html;        if (response.code =='501') {            html = "<div style='float:left;'><p style='text-align:left'>内容：  " + response.desp + "<a  href='/../../exportFile/"+ response.exportFnm + "'target='_blank'>详情下载。</a></p></div>"        }else{            html = "<div style='float:left;'><p style='text-align:left'>内容：  " + response.desp + "></p></div>"        }        $(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;    }

效果