【bootstrap-fileinput】前后台完整示例

效果图：

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循环只执行了一遍。然后返回结果给页面，页面对当前文件上传状态做处理。