效果圖：

HTML:

<!-- 引入css檔案 -->
<link rel="stylesheet" type="text/css" href="css/fileinput.min.css"/>
<!-- 引入js檔案 -->
<script type="text/javascript" src="js/fileinput.min.js"></script>
<script type="text/javascript" src="js/zh.js"></script>

<div class="modal-body">
    <a href="" class="form-control" style="border:none;">下載模板</a>
    <input type="file" name="reportFile" id="reportFile" multiple class="file-loading" />
</div>
 

JS:

    //初始化fileinput
    var oFileInput = new FileInput();
    //引數1:控制元件id、引數2:上傳地址
    oFileInput.Init("reportFile", "/report/uploadReport"); 

    //初始化fileinput
    var FileInput = function () {
        var oFile = new Object();

        //初始化fileinput控制元件（第一次初始化）
        oFile.Init = function(ctrlName, uploadUrl) {
            var control = $('#' + ctrlName);

            //初始化上傳控制元件的樣式
            control.fileinput({
                language: 'zh',                                         //設定語言
                uploadUrl: uploadUrl,                                   //上傳的地址
                allowedFileExtensions: ['jpg', 'gif', 'png', 'pdf'],    //接收的檔案字尾
                showUpload: true,                                       //是否顯示上傳按鈕
                showCaption: false,                                     //是否顯示標題
                browseClass: "btn btn-primary",                         //按鈕樣式     
                //dropZoneEnabled: false,                               //是否顯示拖拽區域
                //minImageWidth: 50,                                    //圖片的最小寬度
                //minImageHeight: 50,                                   //圖片的最小高度
                //maxImageWidth: 1000,                                  //圖片的最大寬度
                //maxImageHeight: 1000,                                 //圖片的最大高度
                //maxFileSize: 0,                                       //單位為kb，如果為0表示不限制檔案大小
                //minFileCount: 0,
                maxFileCount: 10,                                       //表示允許同時上傳的最大檔案個數
                enctype: 'multipart/form-data',
                validateInitialCount:true,
                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                msgFilesTooMany: "選擇上傳的檔案數量({n}) 超過允許的最大數值{m}！",
                uploadExtraData:function (previewId, index) {           //傳參
            	    var data = {
                        "reportGroupId": $('#lbl_groupId').html(),      //此處自定義傳參
                    };
                    return data;
                }
            });

            //匯入檔案上傳完成之後的事件
            $("#reportFile").on("fileuploaded", function (event, data, previewId, index) {
                //報告table重新整理
                showDataGrid_report($('#lbl_groupId').html());
            });
        }
        return oFile;
    };
 

JAVA:

    /**
     * 報告上傳
     * */
    @RequestMapping(value = "/uploadReport", method = RequestMethod.POST)
    public ApiResponse uploadReport(HttpServletRequest request, HttpServletResponse response) {
        Map<String, Object> result = new HashMap<String, Object>();
        //獲取引數
        String reportGroupId = getParam(request, "reportGroupId");
        
        //呼叫通用介面上傳檔案
        result = uploadFile(request, "reportFile", reportGroupId);
        
        ApiResponse ret = new ApiResponse();
        ret.setMap(result);
        return ret;
    }    

    /**
     * 上傳檔案通用介面
     * 
     * @param request           請求體
     * @param dstFileName       html上傳元件中(input中name屬性)，上傳檔案體名稱，通過此名稱獲取所有上傳的檔案map
     * @param reportGroupId     （特殊）上傳報告所述報告組id
     * */
    protected Map<String, Object> uploadFile(HttpServletRequest request, String dstFileName, String reportGroupId) {
        Map<String, Object> ret = new HashMap<String, Object>();
        
        //判斷儲存檔案的路徑是否存在
        File fileUploadPath = new File(FILE_UPLOAD_PATH);
        if (!fileUploadPath.exists()) {
            fileUploadPath.mkdir();
        }
        
        if (ServletFileUpload.isMultipartContent(request)) {
            MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
            List<MultipartFile> fileList = multipartRequest.getFiles(dstFileName);
            for (MultipartFile item : fileList) {
                String fileName = "";        //當前上傳檔案全名稱
                String fileType = "";        //當前上傳檔案型別
                String saveFileName = "";    //儲存到伺服器目錄的檔名稱
                String reportAddr = "";      //儲存到伺服器目錄的檔案全路徑
                try {
                    fileName = item.getOriginalFilename();
                    fileType = item.getContentType();
                    saveFileName = getCurrentTime("yyyyMMddHHmmss") + "_" + fileName;
                    reportAddr = fileUploadPath + "/" + saveFileName;
                    reportAddr = reportAddr.replace("/", File.separator).replace("\\", File.separator);
                    
                    File savedFile = new File(fileUploadPath, saveFileName);
                    item.transferTo(savedFile);
                   
                    //上傳檔案成功，儲存檔案資訊到表reportDetail
                    Map<String, Object> param = new HashMap<String, Object>();
                    param.put("reportGroupId", reportGroupId);
                    param.put("reportName", fileName);
                    param.put("reportType", fileType);
                    param.put("reportAddr", reportAddr);
                    param.put("createTime", getCurrentTime("yyyy-MM-dd HH:mm:ss"));
                    param.put("lastOper", "xxxxxxx");
                    ApiResponse r = (ApiResponse) saveEntity("/report/saveReportDetail", param, ApiResponse.class);
                    
                    if (r.getCode() == 0) {
                        ret.put("success", true);
                    } else {
                        ret.put("success", false);
                        ret.put("message", r.getMessage());
                    }
                } catch (Exception e) {
                    logger.error(e.getMessage());
                    ret.put("success", false);
                    ret.put("message", e.getMessage());
                }
            }
        }
        return ret;
    }
 

PS：後臺接收檔案時用了for迴圈，其實bootstrap-fileinput外掛在多檔案上傳時，是採用多次呼叫'uploadUrl'實現檔案上傳，所以當前for迴圈只執行了一遍。然後返回結果給頁面，頁面對當前檔案上傳狀態做處理。